Плавный переход изображения с чёрно-белого в цветное (CSS)
Плавный переход изображения при наведении мыши из чёрно-белого в цветное и обратно, только с помощью CSS
by Recouse
HTML
<body>
<img src="http://lifestripes.ru/wp-content/uploads/kompyuternye-illyustracii-kyan-ji.jpg" alt="" class="bw">
</body>CSS
.bw {
-webkit-filter: grayscale(100%);
filter: grayscale(100%); /* Чёрно-белое изображение */
transition: 1.5s; /* Плавный переход */
}
.bw:hover {
-webkit-filter: none;
filter: none; /* Убираем фильтр */
}