Как сделать картинку чёрно-белой?

Обычно изображение для сайта готовят в графическом редакторе и в нём уже задают яркость, контрастность и другие параметры картинки. С помощью CSS этот процесс можно упростить и менять цветность «на лету», к примеру, при наведении указателя на изображение. Для этого используем свойство filter и функцию grayscale(1) для создания чёрно-белой картинки и grayscale(0) для цветной. Чтобы всё это менялось плавно и красиво, добавляем свойство transition с указанием времени перехода (пример 1).

Пример 1. Чёрно-белая картинка

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Картинка</title>
  <style>
   .grayscale {
    filter: grayscale(1);
    transition: 1s;
   }
   .grayscale:hover {
    filter: grayscale(0);
   }
  </style>
 </head>
 <body>
  <img src="image/cocktail.jpg" alt="" class="grayscale">
  <img src="image/cocktail.jpg" alt="" class="grayscale">
 </body>
</html>

Результат данного примера показан на рис. 1.

Изменение цветности картинки при наведении