Fade de imágenes con CSS y jQuery

<div id="imagen-fade">
  <img src="URL_IMAGEN" width="390" height="260"/>
</div>

<style type="text/css">  
  #imagen-fade {
    cursor: pointer;  
    height: 375px;  
    margin: 0 auto;
    position: relative;
    width: 500px;  
    background: transparent url(URL_IMAGEN_2) no-repeat left top;  
  }  
  #imagen-fade img {
    -moz-transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
    opacity: 1;
    filter:alpha(opacity=100);
  }
  #imagen-fade:hover img {
    opacity:0;
    filter:alpha(opacity=0);
  }
</style>

<div id="imagen-fade">
  <img src="URL_IMAGEN"/>
</div>

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

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