Как сделать чтоб ПНГ картинка изменяла цвет при наведении на нее (CSS)?

Question

[maxemga]

Хочу чтобы при наведении на картинку, она становилась такого цвета, как это сделать? (справа обычное состояние, а слева хочу чтоб так было при наведении)

Comments

[Максим]

svg надо ну или колдовать фильтрами css или blend-mode

Answer 1

[eugenedrvnk]

Если использовать png картинку, то изменять её можно либо меня прозрачность, либо навешивая разного рода фильтры. (в вашем случае возможно подойдёт "filter: sepia(60%);"
Либо же - можно использовать svg и там просто изменять цвет заливки.

Answer 2

[Андрей Федоров]

img:hover {
filter: brightness(200%) sepia(100%);
}

Answer 3

[Jukekek]

Нужно сделать через SVG или сепию

Answer 4

[forspamonly2]

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