Черно-белая картинка CSS

Черно-белая картинка CSS

При помощи CSS можно менять цвет изображения без графических редакторов, за это отвечает свойство filter. Если к примеру на сайте галерея, то можно добавить эффект при наведении. Так же можно применить и другие фильтры с помощью генератора фильтров для изображений CSS, и скопировать уже готовый код.

Пример

HTML


<img src="image.jpg" alt="" class="grey-image"/>

CSS


.grey-image {
    filter: grayscale(1); /* Черно-белый фильтр для изображения */
    transition: 1s; /* Время изменения цвета изображения */
}
.grey-image:hover {
    filter: grayscale(0); /* Цветное изображение при наведении */
}

Свойство filter в браузере Internet Explorer не работает.

By julia