1

что я делаю не так? не работает и все тут :( нужно при наведении что бы на картинку накладывался цвет. Я наверное не знаю хитрость :)

img:hover {
	background: rgba(39,156,232, 0.5);
	cursor: pointer;
}
<div class="head_block"><img src="http://lorempixel.com/output/city-q-c-360-260-1.jpg" alt="" width="360" height="260"></div>

3
  • В хроме все работает
    – Arcadiy
    8 ноя 2016 в 6:41
  • @Arcadiy странно очень, у меня тоже заработало здесь, но на моем index.html это не работает =\, вот глянь, я повесил картинку, hover перестал работать 8 ноя 2016 в 6:46
  • либо мне попробовать img вставить именно в сss и там уже мудрить 8 ноя 2016 в 6:50

2 ответа 2

3

.head_block
{
    position: relative;
    display: inline-block;
}

.head_block img, .overlay 
{
    width: 360px;
    height: 240px;
}

.overlay
{ 
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0);
}

.overlay:hover 
{ 
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: rgba(0, 0, 234, .5);
}
<div class="head_block">
    <span class="overlay"></span>
    <img src="http://s5.pikabu.ru/post_img/big/2015/08/20/7/1440069505_326762601.png"" alt="" />
</div>

1
0

Можно так сделать

img:hover {
	background: rgba(39,156,232, 0.5);
	cursor: pointer;
    opacity: 0.3;
}
<div class="head_block"><img src="http://lorempixel.com/output/city-q-c-360-260-1.jpg" alt="" width="360" height="260"></div>

1
  • Не думаю, что решение верно. Вы меняете прозрачность самой картинки, что ни есть верно (под картинкой могут быть другие элементы, например), хотя автор указал, что цвет должен накладываться. Важно, что если выполнить подобный код, то вне зависимости от установленного цвета результат не изменится.
    – Aquinary
    8 ноя 2016 в 8:06

Ваш ответ

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

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