• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Сделать картинки черно белыми при наведение (Как сделать чёрно-белым изображение и обратно цветным на CSS)
Сделать картинки черно белыми при наведение
Kosten
Дата: Четверг, 2019-02-14, 01:36 | Сообщение 1
Администраторы
Сообщений:22338
Награды: 56


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



HTML

Код
<img src="http://zornet.ru/_ld/93/91267808.jpg" class="grayscale">

CSS

Код
.grayscale:hover {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);

  filter: gray; /* IE 6-9 */
  -webkit-filter: grayscale(1);
  cursor:pointer;
}

Также, чтоб все корректно на других браузерах отображалось, то добавляем к уже созданному классу строку:

Код
.grayscale {
/* тут будут упомянутые выше свойства */
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}


Аналогичным способом подключаем файл для того, чтобы обесцвечивание работало и в браузере Firefox.

Код
filter:  url(grayscale.svg#greyscale);

Вашему вниманию предоставлен кроссбраузерный вариант, который отлично работает и создает чёрно-белое изображения или заданного элемента картинки, которая изначальна идет в цветном виденье.

PS - что важно, что первый стиль без корректировок отлично и корректно работает, а остальное вы можете уже самостоятельно в стиль подключить.

Демонстрация
Прикрепления: 7250658.png(120.8 Kb) · greyscale.zip(80.5 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Сделать картинки черно белыми при наведение (Как сделать чёрно-белым изображение и обратно цветным на CSS)
  • Страница 1 из 1
  • 1
Поиск: