crea 2 divs anidados con el mismo tamaño, al de abajo dale una imagen de fondo y al de arriba un color
con jquery setea una opacidad 0 al div superior
usa el evento over
cuando esta encima setea el div superior una opacidad 0.5 o la que quieras y cuando sale volve a 0
Código HTML:
Ver original<!DOCTYPE html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> $( function (){
$('.superior').css({'opacity':'0'});
$('.superior').hover( function(){
$(this).stop().fadeTo(500, 0.5);
}, function(){
$(this).stop().fadeTo(500, 0);
});
})
.fondo, .superior {
width:200px;
height:200px;
}
.fondo{
background:url(http://www.todoavatar.com/wp-content/plugins/simple-post-thumbnails/timthumb.php?src=/wp-content/thumbnails/2752.jpg&w=200&h=200&zc=1&ft=jpg)
}
.superior{
background:#000
}
</style>
<body>
<div class="fondo"><div class="superior"></div></div>
</body>
</html>