Zoom-эффект на CSS3

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

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

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

private-interior

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

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

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

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

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

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

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

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

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

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

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

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

Делаем эффект параллакса для заднего фона на сайте

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

Очень простая мулька, но выглядит при соответствующем фоне потрясающе. Сделаем так, чтобы при скроллинге страницы, фон двигался вдвое медленнее, создавая что то вроде эффекта параллакса. Этот кусочек скрипта привязывает нас к событию onscroll окна. ...

Читать

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

Август 1, 2018 г.

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

Читать

 

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

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



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

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

  1. виталий:

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

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

  2. виталий:

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

  3. виталий:

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

  4. виталий:

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