UnRealName
@UnRealName

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

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

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

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

Буду рад готовым шаблонам.
  • Вопрос задан
  • 9000 просмотров
Решения вопроса 1
twobomb
@twobomb
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 7
dedalik
@dedalik
Веб разработчик
Можно использовать css3, свойство filter, с помощью которого можно манипулировать с цветом картинки.

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

Все демо тут

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

Если вам нужно только с чёрно белой на цветную тут хорошая статья с исходниками, а тут демо, поддержка IE 7+
Ответ написан
@Screpka
img {
filter: greyscale(100%);
}
img:hover {
filter: greyscale(0);
}

Не во всех браузерах работает, поэтому придется добавить -moz- -ms- -webkit- -o-
Ответ написан
Defman21
@Defman21
CSS: filter, не?
UPD: посмотрел сайт. У них просто одно большое изображение с цветным и серым лого. https://www.cybermarketing.ru/images/conf2015/cm-s...
При таком подходе надо просто менять сдвиг background.
Ответ написан
Комментировать
@AlikDex
Откройте код да посмотрите. Если коротко, то на приведенном примере используется смещение фона на событие hover.
background-position: 0px -90px;
Сама же картинка является спрайтом.
Ответ написан
Комментировать
UnRealName
@UnRealName Автор вопроса
Понял, что у них все сделано одной картинкой) Тогда это не так интересно)

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

UPD
Вот еще несколько другое решение: registratura.ru/contacts/sotrudniki
Ответ написан
Вот еще при помощи canvas можно
www.html5canvastutorials.com/advanced/html5-canvas...
Ответ написан
Комментировать
dima9595
@dima9595
Junior PHP
Много уже кто писал, но всё же отвечу:
1. Ставим картику в класс, например, в .image-gray. И этому классу в CSS добавляем фильтр.
2. При наведении (:hover) - убираем этот фильтр.
Профит)
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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