Черное прозрачное наложение на изображение только с CSS?
Я пытаюсь добавить прозрачное черное наложение на изображение всякий раз, когда мышь наводит курсор на изображение только с помощью CSS. Это возможно? Я попробовал это:
http://jsfiddle.net/Zf5am/565/
Но я не могу заставить div показываться.
<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;
}