Este ejemplo muestra como aplicar jQuery para mostrar efecto fade de una imagen sobre otra al situar el puntero del mouse.
Uso:
HTML:
<div id="ejemplo_fade"> <img src="https://www.webintenta.com/img/fashion1.jpg" /> </div>
CSS:
#ejemplo_fade{ background:url("img/fashion2.jpg"); position:relative; width:200px; height:200px; cursor:pointer; }
JAVASCRIPT:
$(document).ready(function() { $("#ejemplo_fade").hover(function(){ $(this).find("img").fadeOut(); }, function() { $(this).find("img").fadeIn(); }); });
Vía WebIntenta | Demo