La siguiente técnica nos permite realizar una transición entre dos fotos cuando situamos el puntero del ratón sobre una de ellas. Tenemos que realizar una capa con el tamaño exacto de las dos imágenes, poner como fondo de esta capa a una de ellas y dentro de la capa a la otra imagen.
HTML:
<div id="ejemplo_fade">
<img src="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();
});
});
El ejemplo completo sería:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fade Imagenes</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#ejemplo_fade").hover(function(){
$(this).find("img").fadeOut();
}, function() {
$(this).find("img").fadeIn();
});
});
</script>
<style type="text/css">
#contenido{
width:500px;
margin:auto 0;
padding:30px;
}
#ejemplo_fade{
background:url("img/fashion2.jpg");
position:relative;
width:200px;
height:200px;
cursor:pointer;
}
</style>
</head>
<body>
<div id="contenido">
<div id="ejemplo_fade">
<img src="img/fashion1.jpg" />
</div>
</div>
</body>
</html>