Наложить цвет на картинку как правильнее всего?

Question

[Novamoscow]

В гугле ответы есть, но большинство из них старые и возможно сейчас не совсем актуальны.

Задача такая, наложить полу прозрачные бекграунд по верх картинки и при наведении менять цвет этого бекграунда.

Answer 1

[Ivan Stroykin]

Пример. Не нужно плодить лишний html и css код...

Comments

[Novamoscow]

Спасибо, именно поэтому задал вопрос, думаю этот способ наиболее удобен

[Ivan Stroykin]

Novamoscow: да. вместо .box используйте какой-нибудь "говорящий" класс, и используйте в любом нужном месте. А правки нужно будет вносить только в одном месте (обычно либо цвет, либо скорость анимации)

Answer 2

[igumenov]

<div class="item">
<img src="images.png">
<div class="bg"></div>
</div>

.item{
display:block;
position: relative;
}
.item .bg{
position:absolute;
background: rgba(0,0,0,0.5);
width: 100%;
height:100%;
transition: .3s;
}
.item:hover .bg{
background: #f00;
}

Answer 3

[Alexander Pushkarev]

Вот так - codepen.io/AXP/pen/zZzdRW