Из ч/б в цвет при наведении на изображение

С введением CSS3 и HTML5 стал реже пользоваться jQuery, да и скриптами вообще. Например, заказчик попросил внедрить на его сайте функцию раскрашивания изображения при наведении. Для этого загрузим цветные изображения на сайт и применим для них фильтр grascale.

А чтобы всё это раскрашивалось постепенно добавим transition, в противном случае это выглядит менее эстетично.

.your-img-class {
    filter: grayscale(90%);
    transition: 1s;
}

.your-img-class:hover {
	filter: grayscale(0%);
	transition: 1s;
}
Поделиться
Отправить
 14   2018   css
Популярное