Fade de imágenes con y sin jQuery

Esta son dos formas sencillas de crear un efecto fade sobre una imagen, permutando una por otra.

En la primera, sólo usaremos CSS así que el el efecto no funcionará en versiones inferiores a IE9; el HTML para ambos es este:

<div id="ejemplo">
  <img src="URL_IMAGEN"/>
</div>

Y el CSS sería algo así:

<style type="text/css">  
  /* al DIV contenedor lo centramos centramos y dimensionamos */
  #ejemplo {
    cursor: pointer;  
    height: 375px;  
    margin: 0 auto;
    position: relative;
    width: 500px;  
    /* y acá, colocamos la segunda iamgen como fondo */
    background: transparent url(URL_OTRA_IMAGEN) no-repeat left top;  
  }  
  /* a la etiqueta IMG interna, le agregamos el efecto y la transición */
  #ejemplo img {
    -moz-transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
    opacity: 1;
    /* agreamos el filtro para que en IE8 funcione aunque no sea animado */
    filter:alpha(opacity=100);
  }
  /* al poner el cursor encima, la imagen se oculta así que lo que veremos es el fondo de la segunda imagen */
  #ejemplo:hover img {
    opacity:0;
    filter:alpha(opacity=0);
  }
</style>

La otra forma simple es utilizando la librería jQuery.

Como dije, el HTML es exactamente el mismo y el CSS es más corto:

<style type="text/css">  
  /* al DIV contenedor lo centramos centramos y dimensionamos */
  #ejemplo {
    cursor: pointer;  
    height: 375px;  
    margin: 0 auto;
    position: relative;
    width: 500px;  
    /* y acá, colocamos la segunda imagen como fondo */
    background: transparent url(URL_OTRA_IMAGEN) no-repeat left top;  
  }  
</style>

Obviamente, nos falta el script:

<script type="text/javascript">
  $(document).ready(function() {
    $("#ejemplo").hover(function(){
      $(this).find("img").fadeOut();
    }, function() {
      $(this).find("img").fadeIn();
    });
  });   
</script>