Gracias Sergio, estuve probando tu consejo y hay algo que hago mal porque no logro que funcione, esto es lo que hice acorde a tu consejo:
Código CSS:
Ver original<style>
.contenedor{
width:400px;
height:351px;
}
.caption{
background: rgba(236, 126, 40, 0.6);
top:0;
left:0;
width:400px;
height:351px;
}
div.contenedor div.caption {
opacity:0;
filter: alpha(opacity=0); /* IE */
}
div.contenedor:hover div.caption{
opacity:1;
filter: alpha(opacity=50); /* IE */
}
</style>
Código HTML:
Ver original<div class="contenedor"><a href="#"><img src="http://laserhairtherapywestpalmbeach.com/wp-content/uploads/2011/08/Drew-barrymore-covergirl-Copy.jpg" width="400px" height="351px" /></a>
Así cuando me poso sobre la imagen el overlay me aparece debajo de la imagen y no encima, que hago mal?
Gracias