¿Superposición negra transparente sobre la imagen flotante con solo CSS?
Estoy tratando de agregar una superposición negra transparente a una imagen cuando el mouse está sobre la imagen solo con CSS. es posible? Intenté esto:
http://jsfiddle.net/Zf5am/565/
Pero no puedo conseguir que el div aparezca.
<div class="image">
<img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
<div class="overlay" />
</div>
.image {
position: relative;
border: 1px solid black;
width: 200px;
height: 200px;
}
.image img {
max-width: 100%;
max-height: 100%;
}
.overlay {
position: absolute;
top: 0;
left: 0;
display: none;
background-color: red;
z-index: 200;
}
.overlay:hover {
display: block;
}