Fundido de imagen en otra imagen | Programar Plus

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();

});