CSS изменение картинки при наведении курсора

Меня уже не в первый раз спрашивают: как ты сделал увеличивающиеся и поворачивающиеся картинки? Ответ прост: это магия CSS3 — и в этой статье я расскажу, как она работает. Постараюсь не умничать и написать интересно. А вы помогайте мне, помогайте.

Да, это магия CSS3, состоящая из transition и transform свойств.

Вот пример, HTML и CSS код:

Чтобы не заморачиваться с кросбраузерностью:

figure img {
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s ease-out;
}
figure img:hover {
  -webkit-transform: rotate(-3deg) scale(1.1);
  transform: rotate(-3deg) scale(1.1);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}

Разберём HTML вставку картинки

Для изменения картинки при наведении курсора, HTML-код не имеет особого значения. Просто это правильно и оптимально, соответствует HTML5 и хорошо для поисковой оптимизации.

  • figure — контейнер фигуры (диаграммы, картинки и&nbap;т.&nbap;д.);
  • figcaption — заголовок контейнера figure и около-картиночный текст (ну а как это ещё обозвать?).
  • img — отображаемая картинка с адресом миниатюры в атрибуте src и кратким описанием (набором ключевиков) в alt;
  • a — ссылка на большую картинку с кратким описанием (набором ключевиков) в атрибуте title.

Главное:

  • древние браузеры не воспринимают тег figure, для них он объявляется через JavaScript;
  • новые браузеры добавляют тегу figure CSS-свойства по умолчанию, их я обнуляю.

Разберём CSS трансформацию картинки

В рассматриваемом примере у картинки два состояния:

  • figure img — начальное (по умолчанию);
  • figure img:hover — при наведении на неё курсора.

Дальше мы рассмотрим CSS-свойства трансформации картинки.

CSS-свойство transform

CSS-свойство transform появилось только в CSS3 и задаёт одну или несколько (разделённых пробелом) функций трансформации элемента или none— отмена.

Примечание: для поддержания кроссбраузерности, укажите варианты transform с префиксами: -webkit, -moz, -ms и -o. При желании укажите и свойства -ms-filter (для IE8+) и filter (IE 6 и 7) с заданием матрицы трансформации через progid:DXImageTransform.Microsoft.Matrix(), но этого я разжёвывать не буду.

В приведённом примере использовались две функции трансформации:

  • rotate() — задаёт угол поворота элемента относительно точки трансформации. Например: transform: rotate(-3deg) — поворот элемента против часовой стрелки на 3 градуса;
  • scale() — задаёт масштаб элемента по горизонтали и вертикали. Например: transform: scale(1.1) — увеличит элемент на 10%.

Задавать transform для начального состояния картинки (figure img) не нужно.

CSS-свойство transition

CSS-свойство transition появилось только в CSS3 и задаёт параметры анимации: CSS-свойство перехода и/или время анимации и/или функцию анимации и/или время задержки перед анимацией.

Примечание: для поддержания кроссбраузерности, укажите варианты transition с префиксами: -webkit, -moz и -o.

В приведённом примере использовались следующие параметры:

  • у картинки изменяется CSS-свойство transform (учитывайте префиксы!);
  • время (скорость) анимации составляет 0.3s (секунды);
  • используется функция анимации ease-out — анимация начинается быстро, к концу замедляется;
  • время задержки перед анимацией составляет 0s (секунд), т. е. отсутствует и этот параметр можно не указывать.

Чтобы сохранить обратную анимацию (когда курсор убирается с картинки) — transition придётся указать и для начального состояния картинки (figure img).

Полезные CSS фишки

Для контейнера figure я задаю следующие CSS-свойства:

  • background: #ddd — фоновый цвет, так картинка отделяется от контента;
  • text-align: center — позиционирование текста по центру (не забываем, картинка — строковый элемент). Заодно и текст в figcaption центрируется;
  • margin: 1em -20px — внешний отступ, сверху и снизу как у абзаца (тег p) — 1em, а слева и справа он «вылазит» за область родительского блока;
  • padding: 10px 0 — внутренний отступ, т. е. только сверху и снизу.

Чтобы картинка (при изменении) не вылезала за пределы контейнера figure, задайте контейнеру CSS-свойство: overflow: hidden.

Лажа в том (а куда без неё?), что анимация ест очень много ресурсов. На десктопе — худо-бедно, но допустимо; на мобильных — не рекомендую.