RibosoMatic

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="http://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