Делаем цветное изображение черно-белым с помощью CSS Filters

28.02.2015

В данном примере сделаем изображение с классом filter черно-белым по умолчанию, а при наведении на него, оно будет плавно становиться цветным.

.filter{
  -webkit-filter:grayscale(100%);
  -moz-filter:grayscale(100%);
  -ms-filter:grayscale(100%);
  -o-filter:grayscale(100%);
  filter:grayscale(100%);
  -webkit-transition:1s;
  -moz-transition:1s;
  -o-transition:1s;
  transition:1s;
}

.filter:hover{
  -webkit-filter:grayscale(0%);
  -moz-filter:grayscale(0%);
  -ms-filter:grayscale(0%);
  -o-filter:grayscale(0%);
  filter:none;
}

Больше информации здесь:

Не уходи, пока не прочитаешь:

Оставить комментарий