Среди простых, но эффектных способов оживить картинки на сайте есть следующий визуальный эффект, для которого нужны лишь CSS3 стили. Назовем его — «игра с цветностью».
Он не плох для выделения иконок меню, анимации выбранной картинки в списке (портфолио, список фотографий и т.п.).
Вот как он работает (наведитесь на картинку):
При наведении, обесцвеченное изображение «набирает» цветность. Так как картинка одна, то я сделал набор цветности длительным (3 секунды).
Давайте рассмотрим стили. Они очень простые:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
img { /* убираем изначально цветность */ filter: grayscale(100%); -webkit-filter: grayscale(100%); } img:hover { /* при наведении восстанавливаем её */ filter: grayscale(0%); -webkit-filter: grayscale(0%); /* время анимации фильтра - 3 секунды */ transition: filter 3s; -webkit-transition: filter 3s; -moz-transition: filter 3s; -o-transition: filter 3s; } |
Если почистить от директив, которые поддерживаются только теми или иными браузерами, то останется вообще короткий код:
|
1 2 3 4 5 6 7 8 |
img { filter: grayscale(100%); } img:hover { filter: grayscale(0%); transition: filter 3s; } |
