Tutorial Fade Image Into Another Image

by in , 0

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">
    <img src="http://cdn.css-tricks.com/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();

});

Leave a Reply