Обесцвеченная картинка с анимацией при наведении

Обесцвеченная картинка с анимацией при наведении

719
27.03.2017

Иногда дизайн предполагает обесцвеченные изображения, которые должны снова становиться цветными при наведении на них курсора мыши.

Для начала нужно, естественно, вывести само изображение

<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).



Благодарю за внимание! Делитесь вашими замечаниями в комментариях ниже.


P.S. Обращайтесь ко мне за приобретением лицензий и продлений на 1C-Битрикс "Управление сайтом", лицензий на облачную и коробочную версии Битрикс 24 а также за приобретением и внедрением готовых решений на базе 1С-Битрикс от партнеров. За более подробной информацией свяжитесь со мной любым удобным для вас способом


Комментарии

Еще никто не комментировал данную публикацию. Будьте первыми!

Добавить комментарий

captcha

Возврат к списку