Для розмиття картинок застосовується властивість filter з функцією blur(), всередині якої пишеться радіус розмиття. Чим більше значення, тим сильніше буде розмито зображення. Мінімальне значення дорівнює нулю, причому ніякого розмиття не відбувається. При значенні, скажімо, 5px відбувається розмиття зображення і втрата деталізації. У прикладі 1 показано розмиття картинок через blur(), при наведенні на них покажчика картинки плавно перетворюються на вихідні різкі зображення.
Приклад 1. Використання blur()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Розмиття</title> <style> .pic { filter: blur(5px); /* Розмиття */
transition: 1s; /* Час переходу */
}
.pic:hover { filter: blur(0); /* Скасуємо розмиття */
}
</style>
</head>
<body> <img src="image/cocktail.jpg" class="pic" alt=""> <img src="image/cocktail-2.jpg" class="pic" alt="">
</body>
</html>Результат цього прикладу показаний на рис. 1.
Мал. 1. Розмиття зображення