Для начала нужно, естественно, вывести само изображение
<img src="путь до изображения"&rt;
Дальше, задаем для изобравжения стили обесцвечивания:
img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray; /* IE 6-9 */
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
А также зададим стили для изображения при наведении на него курсора мыши:
img:hover {
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
-o-filter: none;
filter: none;
filter: none; /* IE 6-9 */
}
Параметр all в transition говорит, что правило будет работать для всех стилей, а второй параметр — время анимации. В первый параметр можно указать определённое свойство (например height, чтобы анимировать только высоту), а во второй время в секундах (можно в десятичных дробях — 0,1s).
