Question

I would imagine jQuery would be the library to use in order to do this. I can certainly figure out how to switch the source of an image on mouseover and then switch it back on mouseout. But how could I achieve this effect with a fade to and from the images?

I have tried to achieve this already using the jQuery Cycle plugin and I was unsuccessful. I feel maybe there’s an easier way to do this. I’d appreciate the help, any thoughts?

Answer 1

Put an image in a DIV and set the background of the DIV to the first image. Put an image tag in the DIV and point the SRC to the second image.

Now you can fiddle with the opacity of the IMG, exposing the background image behind it without having to swap anything.

use .opacity()

Make sure you put dimensions on the wrapper DIV or else it will vanish once the opacity of the image inside gets to zero.

<div class="wrapper">
   <img src="..." />
</div>