Как сделать, чтобы при наведении курсора на фотку она покрылась прозрачно-черным цветом?
Нет, я не нуб. Сделал так:
<div id="grid">
<div id="cover">
<img src="img/albums.jpg" />
</div>
</div>
CSS:
img {
height:200px;
width:200px;
z-index:5;
}
#grid {
height:200px;
width:500px;
z-index:4;
background-color:#499;
}
#grid:hover img {
background-color:rgba(0,0,0, 0.6);
z-index:6;
}
Вот тут он работает как надо: JSFiddle
Думаю проблема в том, что это прозрачное покрытие не может ставать перед фоткой. В JSFiddle т.к не отображается фотка, то покрытие сползает. А когда там фотка стоит, то она не позволяет background-color сползать поверх.
Как решить проблему?