@maxemga

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

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

5f0079ea247ff816788155.png
  • Вопрос задан
  • 75 просмотров
Решения вопроса 4
sniggering_deus
@sniggering_deus Куратор тега CSS
One Morning Left - Words Won`t Save You
Если будете использовать SVG для этих иконок - в таком случае можно при наведении без лишних проблем менять цвет. В случае с PNG - изображениями - придётся менять изображения при наведении и пытаться с помощью transition всё это дело доводить до идеала. Также если нет изображений в формате SVG - можно использовать css фильтры / mix-blend-mode / и пр.

Но лично я рекомендую найти данные изображения в формате SVG и/или конвертировать/отрисовать имеющиеся png изображения в SVG и затем при наведении можно будет без лишних усилий менять цвет заливки иконок. Потому что mix-blend-mode / css filters - не всегда будут панацеей и будут такие ситуации когда будет проще использовать SVG.
Ответ написан
@eugenedrvnk
Если использовать png картинку, то изменять её можно либо меня прозрачность, либо навешивая разного рода фильтры. (в вашем случае возможно подойдёт "filter: sepia(60%);"
Либо же - можно использовать svg и там просто изменять цвет заливки.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@forspamonly2
если хочется именно пнг, сделайте его белым с дыркой в виде картинки. а потом меняйте цвет фона, который в дырку выглядывает.
то есть нужно перенести изображение в альфа канал и проинвертировать
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы