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

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

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

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