Alternar imagen al hacer hover y mouseout

En este artículo vamos a ver un ejemplo interesante que en muchos casos nos podría ser de gran utilidad.

Se trata de tener 2 imagénes, ya sea de un artículo, producto, noticia o lo que fuese y que al pasar el ratón por encima y sacarlo se produzca una alternación de ambas imágenes.

Tendremos 2 imágenes dentro de un contenedor:

<div class="product-photo">
   <a style="position:absolute; top:0px;" href="#">
      <img src="images/2.jpg" class="img2">
      <img src="images/1.jpg" class="desaparece img1">
   </a>
</div>

Los estilos necesarios serían:

.product-photo {
    background-color: #CCCCCC;
    float: left;
    position:relative;
    height: 285px;
    margin-bottom: 5px;
    width: 181px;
}

.img1 {
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 1;
}

.img2 {
    position:absolute;
    top:0px;
    left:0px;
}

Y luego faltará la clave del asunto, el código jQuery que simula la alternación de las imágenes utilizando la función animate() con el atributo «opacity».

<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.desaparece').hover(function(){
        $(this).animate({opacity:0});
    },function(){
        $(this).animate({opacity:1});
    });
});
</script>

Ver ejemplo en funcionamiento