Zoom-эффект на CSS3

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

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

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

private-interior

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

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

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

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

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

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

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

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

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

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

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

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

Эффект, затрудняющий прочтение текста

Август 1, 2018 г.

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

Читать

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

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

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

Читать

 

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

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



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

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

  1. виталий:

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

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

  2. виталий:

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

  3. виталий:

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

  4. виталий:

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