Динамическое изменение цветности средствами CSS

Как сделать так, чтобы черно-белые картинки становились цветными при наведении?

Как сделать черно-белую картинку цветнойБывает, что на странице сайта много разноцветных картинок, и они выглядят слишком пестро и разнородно все вместе. Поэтому было бы здорово сделать все изображения на странице (например, в миниатюрах постов) монохромными. Но, опять же, нам не хочется совсем отказываться от цвета! Пусть каждая картинка при наведении мыши становится цветной — так мы сохраним и цветность, и сайт будет выглядеть более гармонично.

Раньше, чтобы провернуть такой фокус, нам нужно было бы подготовить для каждой картинки черно-белую версию в Photoshop и потом химичить со стилями, чтобы происходила замена. Но теперь все намного проще! Даже не надо заморачиваться с JQuery или JavaScript, превратить черно-белое изображение в цветное можно средствами CSS.

Итак, допустим, на страницу выводятся миниатюры постов, и все они имеют класс

.post-thumbnail

.

Чтобы «на лету» сделать все цветные картинки монохромными, зададим этому классу следующие атрибуты:

img.post-thumbnail {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray; /* IE 6-9 */
}

Всё, теперь картинки с классом .post-thumbnail сами собой стали черно-белыми. Теперь допишем наши стили, чтобы картинкам возвращался цвет при наведении мыши:

img.post-thumbnail {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray; /* IE 6-9 */
}
img.post-thumbnail:hover {
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  -o-filter: none;
  filter: none;
  filter: none; /* IE 6-9 */
}

А теперь сделаем так, чтобы картинки становились из черно-белых цветными в анимированном режиме. Добавим несколько строк, где параметр «all» означает, что этот атрибут будет действовать для всех стилей, а «1s» — это время, за которое происходит изменение:

img.post-thumbnail {
  -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-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
/*КОНЕЦ КОДА АНИМИРОВАНИЯ*/
}
img.post-thumbnail:hover {
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  -o-filter: none;
  filter: none;
  filter: none; /* IE 6-9 */
}

Вот так всё просто. Можете попробовать :-)


Если вы хотите изучить CSS и уверенно использовать его функционал,

то здесь вы можете скачать бесплатный базовый видеокурс CSS от Евгения Попова (я сама проходила его, когда только начинала знакомиться с веб-дизайном и теперь предлагаю его в рамках партнерской программы, т.к. уверена в его высоком качестве:

CSS250
Курс содержит 45 коротких видео-уроков, где чётко и ясно с примерами объяснены все базовые функции CSS, особенности синтаксиса и применения. Пройдя этот курс, вы научитесь основам CSS-вёрстки и сможете уверенно и грамотно создавать современные веб-страницы.

Скачать бесплатный базовый курс CSS
(скачивание в .zip архиве с Yandex.Диск)

 ,


Привет! Меня зовут Надежда, и я автор проекта "Коробка с карандашами". Этот проект — мой способ собрать и структурировать полезную информацию для всех тех, кто любит (или пока только мечтает) рисовать, хочет наполнить свой яркими красками и стремится заявить о себе миру, не потеряться в современном информационном пространстве.
  • «...Рисование — это волшебный процесс. Когда ваш мозг устает от своей словесной болтовни, рисование — хороший способ покончить со словами и поймать мимолетный образ трансцендентной реальности»

  • @nadya.wyn