Zoom-эффект на CSS3

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

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

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

private-interior

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

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

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

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

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

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

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

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

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

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

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

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

Анимация ожидания загрузки/обновления, используя CSS3

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

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

Читать

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

Ноябрь 1, 2015 г.

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

Читать

 

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

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



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

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

  1. виталий:

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

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

  2. виталий:

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

  3. виталий:

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

  4. виталий:

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