Фильтр

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

Синтаксис

filter: <фильтр>(<значение>);

Пример

Код примера скопирован в буфер
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Фильтр</title>
  <style>
   .sepia {
    filter: sepia(1);
    transition: 2s;
   }
   .sepia:hover {
    filter: sepia(0);
   }
  </style>
 </head>
 <body>
  <img src="image/person1.jpg" alt="" class="sepia">
  <img src="image/person2.jpg" alt="" class="sepia">
 </body>
</html>

В данном примере при наведении курсора мыши на фотографию, она из сепии плавно превращается в цветную.

Примечание

Chrome до версии 53, Opera до версии 40 и Safari до версии 9.3 поддерживают свойство -webkit-filter.

Браузеры

13 18 53 15 40 6 9.3 35
4.4 35 37 6.1 9.1