Se puede hacer mucho más simple.
Tengo un DIV con la imagen de background-url, y dentro de ese DIV, un elemento IMG con el SRC a la otra imagen, por defecto con display none.
Entonces quedaría así:
Código HTML:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
</head>
<style>
#perro { width:400px; height:300px; background:url(http://www.perros-enlinea.com/imagenes/perrito-empoyon.jpg) no-repeat; }
#perro img { display:none;}
</style>
<script>
$(function(){
$("#perro").hover(
function(){
$("img",$(this)).stop(true,true).fadeIn("slow");
},
function(){
$("img",$(this)).stop(true,true).fadeOut("slow");
}
);
});
</script>
<body>
<div id="perro">
<img src="http://www.perros-enlinea.com/imagenes/perro-disfrazado-ligon.jpg"/>
</div>
</body>
</html>