Как обесцветить картинку с помощью CSS (Grayscale image CSS)

Как сделать изображение черно-белым с помощью CSS

Для начала нам нужно хорошее фото.

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

Решение: Как сделать изображение чёрно-белым с помощью CSS

Сначала создадим структуру для изображения:

<img src="example.jpg" alt="Чорно-белое фото">

Затем добавим стиль для нашего изображения:

img {
  -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:hover {
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  -o-filter: none;
  filter: none;
}

Этот код позволяет возвращать изображению цвета при наведении на него мышью.

Анимация обесцвечивания изображения с помощью CSS

Чтобы сделать процесс обесцвечивания плавным, добавим анимацию с помощью свойства transition:

img {
  -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:hover {
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  -o-filter: none;
  filter: none;
}

Параметр all в transition означает, что анимация будет работать для всех изменяемых свойств. Второй параметр — это длительность анимации в секундах. Например, 1s означает одну секунду.

Если нужно анимировать только конкретное свойство (например, высоту — height), можно указать его в первом параметре, а во втором задать длительность в секундах или долях (например, 0.1s).

Что мы получили?

В результате у нас получилось чёрно-белое изображение, которое можно использовать на нашем сайте.