Размытие картинки при наведении CSS

Размытие картинки при наведении CSS

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

Пример

HTML


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

CSS


.blur-image {
    filter: blur(5px); /* Размытие изображения */
    transition: 1s; /* Время перехода */
}
.blur-image:hover {
    filter: blur(0); /* Отменяем размытие */
}

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

By julia