Как добавить визуальный эффект для изображения

Здесь вы узнаете как добавить визуальные эффекты для изображений при помощи CSS.

CSS фильтры

CSS свойство filter добавляет визуальные эффекты (такие как размытие и контрастность) для элемента.

Примечание: Свойство filter не поддерживается в Internet Explorer, Edge 12 или Safari 5.1 и более ранних версиях.

Пример черно-белого фильтра

Изменяем цвет всех изображений на черно-белый (100% серого):


img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

Исходное изображение

grayscale(100%)

Пример фильтра размытия

Применяем эффект размытия для всех изображений:


img {
  -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
  filter: blur(5px);
}

Исходное изображение

blur(5px)