Здесь мы разберем CSS анимацию — увеличения элемента при наведении (:hover + scale).
Это статья из цикла заметок по CSS анимации и эффектам.
Одна из самых простых и популярных анимаций, она действует следующим образом: при наведении элемент немного увеличивается, как бы «выделяясь» на фоне остальных. Такой эффект отлично подходит для кнопок, карточек, изображений и иконок.
Как это работает
Анимация основана на двух вещах:
- Свойства
transform: scaleиtransition— масштабируют элемент и делают это плавно. - Псевдокласс
:hover— срабатывает при наведении.
Пример, того как это выглядит (наведите курсор на любую карточку):
Карточка 1
Карточка 2
Карточка 3
Вот пример на чистом CSS / HTML
|
1 |
<button class="zoom-effect">Наведи на меня</button> |
Стили:
|
1 2 3 4 5 6 7 |
.zoom-effect { transition: transform 0.3s ease; } .zoom-effect:hover { transform: scale(1.05); } |
Вариации
scale(1.05)— увеличивает размер на 5%. Можно изменить на1.1или даже1.2для более заметного эффекта.- Время (
0.3s) и тип перехода (ease) можно менять под стиль вашего сайта. - Добавьте
transform-origin, чтобы задать точку масштабирования (например, сверху, по центру и т.д.):
|
1 2 3 |
.zoom-effect { transform-origin: center; } |
Где и когда использовать
- Кнопки действий (CTA)
- Изображения в галереях
- Карточки товаров или статей
- Иконки соцсетей
Когда лучше избегать
- Когда много интерактивных элементов рядом — анимация может перегрузить интерфейс.
- На мобильных устройствах, если нет
:hover, может не сработать (хотя можно адаптировать под:activeили JavaScript).