Czarna przezroczysta nakładka na obrazie zawiera tylko CSS?
Próbuję dodać przezroczystą czarną nakładkę do obrazu, gdy mysz unosi się nad obrazem tylko za pomocą CSS. czy to możliwe? Próbowałem tego:
http://jsfiddle.net/Zf5am/565/
Ale nie mogę pokazać diva.
<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;
}