Как плавно осветить картинку?

Question

[dojdimon]

Задача:
нужно сделать плавный переход с серого цвета на синий цвет в картинке на сайте при наведении на нее курсора
Картинка в формате png с бесцветным фоном.

Answer 1

[tigra]

Пример нужен чтобы точно сказать, вариантов много на самом деле:
-можешь цветной картинке поставить

transition:1s;
-webkit-filter: grayscale(100%);

а при hover
-webkit-filter: none;
-можешь сделать сверху картинки блок с прозрачностью 50 допустим и при наведении менять цвет блока

Answer 2

[Михаил Чирский]

Если нужно в синий или какой то другой, гуглим в сторону filter: hue-rotate
а вот пример на htmlacademy https://htmlacademy.ru/courses/97/run/4

Answer 3

[Александр Зачиналов]

менять цветовые палитры растровых изображений в веб сейчас возможно только с помощью свойств filter . Но пока такой подход поддерживает только Webkit. Если у вас заявлена кроссбраузерность, то лучше иметь два разных изображения и с задержкой при наведении скрывать одно и показывать другое.

Comments

[Михаил Чирский]

Не согласен, Firefox хорошо поддерживает и опера частично, на дворе 2015, фильтры уже везде работают, ну в ие с хаками. В прочем как всегда)

[Александр Зачиналов]

в общей картине согласен, но filter это одно из немногих свойств CSS, о котором нельзя говорить обобщая, только в отдельности по каждому значению. И тут уже зависит от того, какое именно значение вам необходимо, Webkit держит большую часть, остальные частично, либо держать но результат другой

[Александр Зачиналов]

да что рассказывать, вот все наглядно caniuse.com/#search=filter

[Александр Зачиналов]

еще могу рассказать недавний случай поучительный, когда у меня везде (даже в IE) на SVG отлично отрабатывал режим наложения multiply, а в Хроме он баговал, вместо прозрачных теней был виден прямоугольная область всех фигур, при этом оффподдержка в целом свойства была заявлена, но именно это значение не работало, пришлось менять на похожий режим. Это я к тому, что в конечном итоге решает практика и у каждого специалиста формируется собственный caniuse) со временем и опытом.