Fade Image Into Another Image

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Make a div that is the exact size of the image. This div will have a background image applied to it of the second image. Then put an inline image inside it.

<div id="kitten" style="background-image: url(dog.jpg);">
  <img src="/images/kitten.jpg" alt="Kitten" />
</div>

Fading the inline image in and out will reveal/hide the second (background) image.

$("#kitten").hover(function(){

    $(this).find("img").fadeOut();

}, function() {

    $(this).find("img").fadeIn();

});