Change image on hover with jQuery

In this tutorial you're going to learn how to create a function in jQuery that changes an image when you hover over it and shows the original image when you remove the cursor from the image. In addition the transition will be animated.

Demo

HTML

CSS

jQuery

$(document).ready(function(){
$(".image-container").hover(function(){
$(this).find(".change-image").stop(true, true).fadeOut(800);
}, function() {
$(this).find(".change-image").stop(true, true).fadeIn(800);
});
});

Explanation

First of all we position our images over each other so that you can only see one of them. Then we add our jQuery function which fades out the above image when you hover over our image-container. The above image is faded in when we remove our mouse from the container. stop(true, true) prevents our function from repeating itself too often.