Анимация изображений с наложением фильтров

Приветствую, вас HTML и CSS кодеры. Сегодня мы с вами устроим разгрузочный день и не будем писать громоздкий код. Возьмер пару... нет, лучше три картинки и поиграемся немного с фильтрами для изображений.

Один из наиболее часто применяемых фильтров в анимации – перевод фотографии из черно-белой версии в цветную при наведении на нее курсора мышки. Это идеальный эффект для портфолио или галереи изображений.

Код на удивление прост. Мы создали изображение:

<img class="mulan" alt="Мулан" src="mulan.jpg">

Добавим для него SVG фильтр:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">

    <filter id="greyscale">

      <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
      0.3333 0.3333 0.3333 0 0
      0.3333 0.3333 0.3333 0 0
      0 0 0 1 0" />

    </filter>

</svg>

Теперь перекрасим его в оттенки серого, используя filter::

.mulan {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: url("desaturate.svg#greyscale");
	filter: gray;
}

Чтобы добиться этого эффекта, нам нужно переключить черно-белый фильтр в противоположную позицию для браузеров, которые его поддерживают, и отключить его полностью для других браузеров:

.mulan:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
  filter: none;
}

В браузерах на движке Webkit черно-белые изображения станут цветными. В последних версиях других браузеров это изменение происходит мгновенно. Перевод фотографии в гамме сепия в цветное изображение осуществляется тем же образом, что и изменение черно-белой фотографии. Разметка выглядит так:

<img class="beauty" alt="Красавица и чудовище" src="beauty.jpg">

Для сепия-фильтра CSS код выглядит так:

.beauty {
	background-color: #5E2612;
	-webkit-filter: sepia(100%);
	filter: sepia(100%);
	filter: url("sepia.svg#old-timey");
	filter: alpha(opacity = 50);
}

Стили при наведении CSS:

.beauty:hover {
      -webkit-filter: sepia(0);
	  filter: sepia(0);
	  filter: alpha(opacity = 100);
	  filter: none;
}

Заметка о SVG

На практике такие анимированные переходы можно осуществить с помощью SVG, но только если само изображение является частью файла SVG. Воспользовавшись этим способом, вы сделаете изображение полностью недоступным в Internet Explorer 8. По этой причине я ограничил роль SVG в этом упражнении функцией внешнего фильтра.