Как менять цвет картинки при наведении курсора?

Question

[UnRealName]

Пожалуйста, подскажите, иногда встречаю на сайтах такую фишку: при наведении на серое изображение - оно раскрашивается.

Вот последний пример со спонсорами: https://www.cybermarketing.ru/conf2015#sponsor

Когда-то делал обратную вещь, с помощью opacity менял вид цветного изображения. Но в этом случае, скорее всего используются скрипты.

Буду рад готовым шаблонам.

Answer 1

[twobomb]

https://jsfiddle.net/7w3kfrtt/

Answer 2

[Radiks Alijevs]

Можно использовать css3, свойство filter, с помощью которого можно манипулировать с цветом картинки.

Вот тут примеры css3 image filters

Все демо тут

Браузеры, которые поддерживаю css3 filter, к сожалению IE тупит как всегда.

Если вам нужно только с чёрно белой на цветную тут хорошая статья с исходниками, а тут демо, поддержка IE 7+

Comments

[UnRealName]

У меня сомнения, это всех браузерах будет работать?

[hjk]

UnRealName: проверить можно caniuse.com/#search=filter Выходит, не совсем уж во всех, но подоходит это или нет — решать уже вам.

[hjk]

UnRealName: ну или Defman21 предложил хороший вариант, 100% кроссбраузерно.

Answer 3

[Олег]

img {
filter: greyscale(100%);
}
img:hover {
filter: greyscale(0);
}

Не во всех браузерах работает, поэтому придется добавить -moz- -ms- -webkit- -o-

Comments

[Максим]

Самый точный ответ!

Answer 4

[Defman21]

CSS: filter, не?
UPD: посмотрел сайт. У них просто одно большое изображение с цветным и серым лого. https://www.cybermarketing.ru/images/conf2015/cm-s...
При таком подходе надо просто менять сдвиг background.

Answer 5

[AlikDex]

Откройте код да посмотрите. Если коротко, то на приведенном примере используется смещение фона на событие hover.
background-position: 0px -90px;
Сама же картинка является спрайтом.

Answer 6

[UnRealName]

Понял, что у них все сделано одной картинкой) Тогда это не так интересно)

Мне интереснее как готовую цветную картинку посредством css или js сделать черно-белой, но при наведении возвращать ей исходный цвет.

UPD
Вот еще несколько другое решение: registratura.ru/contacts/sotrudniki

Comments

[Aleksandr]

Радик Алиев вам уже скинул ссылки

Answer 7

[Никита К.]

Вот еще при помощи canvas можно
www.html5canvastutorials.com/advanced/html5-canvas...

Answer 8

[Дмитрий Кузнецов]

Много уже кто писал, но всё же отвечу:
1. Ставим картику в класс, например, в .image-gray. И этому классу в CSS добавляем фильтр.
2. При наведении (:hover) - убираем этот фильтр.
Профит)