Haz un div que sea del tamaño exacto de la imagen. A este div se le aplicará una imagen de fondo de la segunda imagen. Luego pon una imagen en línea dentro de ella.
<div id="kitten" style="background-image: url(dog.jpg);">
<img src="https://css-tricks.com/images/kitten.jpg" alt="Kitten" />
</div>
Desvanecer la imagen en línea hacia adentro y hacia afuera revelará/ocultará la segunda imagen (de fondo).
$("#kitten").hover(function(){
$(this).find("img").fadeOut();
}, function() {
$(this).find("img").fadeIn();
});