Как наложить прозрачный градиент на img?

Question

[Ruslan Yusupov]

Нужно, чтобы при наведении на картинку на неё накладывался полупрозрачный цвет. Как это сделать?

Answer 1

[Дмитрий]

https://jsfiddle.net/soledar10/a2j03cpm/
https://jsfiddle.net/soledar10/91qw5h9e/

Answer 2

[Alexander Litvinenko]

Поверх картинки div с прозрачным фоном, при hover фон становиться полупрозрачным градиентом.

Comments

[Ruslan Yusupov]

А как div поверх картинки наложить?

[Максим]

Ruslan Yusupov: https://jsfiddle.net/atlanta/rvL7nkwh/ вот так

Answer 3

[Максим Тимофеев]

Варианта 2:
1. Обычная картинка, а поверх нее div с абсолютным позиционированием.
2. Вместо картинки svg - как следствие можем ее менять как угодно через css.

Главное понять: накладываем квадрат или надо повторить контур на картинке.

Answer 4

[niknamme]

Вот хорошая коллекция
imagehover.io

Answer 5

[Сергей Горячев]

https://jsfiddle.net/3cdz1fjh/3/
https://jsfiddle.net/3cdz1fjh/4/