Как поменять цвет img при hover?

Question

[Артём Цымбалюк]

Доброго времени суток
Есть следующий код:

<li>
	<img src="img/save.png" alt="Гарантия">
	<b>Гарантия</b>
	<p>Вечная гарантия на продвижение. Никаких банов и списаний</p>
</li>

как с помощью css при hover на img поменять у img цвет? допустим на #f23535
Сама картинка :

Answer 1

[Алексей Сол]

Действительно, просто поменять цвет с помощью CSS никак. Единственный вариант, если вы хотите прослыть знатным извращенцем, то можете попробовать при наведении задавать блоку абсолютную позицию, смещать его за пределы экрана, а на его месте оставлять тень, заданную с помощью фильтров. Предупреждаю, прокатит не со всеми картинками.

https://jsfiddle.net/4sx29vbr/

А так - спрайты, иконочные шрифты как посоветовали выше.

Answer 2

[Anna_BS]

Можно попробовать сделать через svg фильтр codepen
поддержка

Comments

[metaf]

И генератор: jorgeatgu.github.io/svg-filters, там поиграться с гаммой

[Антон Мудренок]

metaf: cool, спс за ссылочку

Answer 3

[Kostya Gorozhanov]

Никак, невозможно задать цвет картинке, просто меняйте на картинку с нужным цветом.

Comments

[Артём Цымбалюк]

Kostya Gorozhanov как? у меня 6 li и в каждом li своя img. Это если только для каждого li задавать класс, и через css каждому классу на hover давать другую картинку ?

[gleendo]

Артём Цымбалюк: Используйте спрайты

[Kostya Gorozhanov]

Артём Цымбалюк: Изначально картинку используйте как фон для блока, а при наведении меняйте этот фон.

Answer 4

[napa3um]

stackoverflow.com/questions/9303757/how-to-change-...

Answer 5

[PeterRusskikh]

Это для фона мало ли пригодится
img:hover {
-webkit-filter: sepia(1) hue-rotate(320deg) saturate(10);
filter: sepia(1) hue-rotate(320deg) saturate(10);
}
тут цвет меняй https://isotropic.co/tool/hex-color-to-css-filter/