Zoom-эффект на CSS3

Давайте рассмотрим, как сделать эффект небольшого увеличения картинки при наведении курсора на контейнер. Такой эффект может немного оживить страницу, добавить динамики. Я не буду использовать скрипты, эффект работает на CSS3.

Рассмотрим как это работает.

Для начала нам понадобиться картинка для фона. Я закачал на сайт вот эту:

private-interior

И задал следующие стили для блока:

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

Т.к. картинка — это фон контейнера, то она не выйдет за границы этого контейнера, а для манипуляций с масштабом воспользуемся атрибутом background-size.

Опишем анимацию для объекта без наведения:

Т.е. мы задаём две точки анимации @keyframes и её скорость (700 мс).

При наведении анимация будет обратная:

Нам достаточно описать только одну точку (конечную фазу to или 100%), т.к. начальная точка уже описана.
В итоге получим вот такой контейнер (наведите на него курсор мыши):

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

Вариант с увеличением до 200%

Добавил по просьбам трудящихся (в комментариях)…

Написать комментарий

Мало букафф? Читайте есчо !

Виджетик для сравнения двух картинок

Ноябрь 1, 2015 г.

Этот виджет может найти применение для сайта дизайнера или фотографа, которые занимаются реставрацией или обработкой изображений. Наверное, приложений ...

Читать

Эффект тряски элемента на сайте при наведении с помощью CCS3

Октябрь 23, 2015 г.

В последнее время как то кучно пошло у меня использование CCS3 анимации. Продолжаю делиться шаблонами. Сегодня рассмотрим анимацию, которая, запускаясь при наведении, имитирует дрожание элемента. Её можно подключать и в других случаях (не только при наведении). ...

Читать

 

Комментарии к «Zoom-эффект на CSS3»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий:

Много комментариев в “Zoom-эффект на CSS3”

  1. виталий:

    115% переписываю, к примеру в 200% почему то не увеличивает, что не так?

    • Добавил в конец статьи вариант с увеличением до 200%. Все точно также. Только в кейфреймах надо 115 на 200 поменять. Это что, такой тонкий троллинг? :)

  2. виталий:

    что такое троллинг не знаю, но реально не увеличивалось, сейчас снова гляну.

  3. виталий:

    Разобрался, всё, спасибо огромное!!!

  4. виталий:

    А как поставить три изображения друг под другом?
    HTML понятна разметка, а со стилями css3 что то ну ни как не разберусь….