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