0

Как сделать, чтобы при наведении курсора на фотку она покрылась прозрачно-черным цветом?

Нет, я не нуб. Сделал так:

<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 сползать поверх.

Как решить проблему?

1

1 ответ 1

2

Может, как-то так?

HTML:

<div id="grid">
    <img src="img/albums.jpg" />
    <div id="cover"></div>
</div>

CSS:

img, #cover {
    height:100px;
    width:100px;
    position:absolute;
}
#grid {
    height:200px;
    width:500px;
    background-color:#499;
}
#grid:hover #cover {
    background-color:rgba(0,0,0, 0.6);
}
5
  • а зачем вы убрали з-индексы и позицию на абсолют сделали???
    – navi1893
    19 мая 2013 в 8:06
  • А для чего они вообще были нужны? position:absolute; - чтобы div был над img.
    – Yusyuriv
    19 мая 2013 в 8:10
  • у меня, когда вывожу <img> наверх проблемы возникают. По другому как можно добиться?
    – navi1893
    19 мая 2013 в 9:09
  • 1
    @navi1893, какие именно проблемы?
    – Deonis
    19 мая 2013 в 9:36
  • 1
    Судя по id="grid", вы пытаетесь сделать сетку из таких рисунков? jsfiddle.net/GoodBadMan/TdQdr
    – Yusyuriv
    19 мая 2013 в 11:31

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.