Эффект увеличения элемента при наведении

Здесь мы разберем CSS анимацию — увеличения элемента при наведении (:hover + scale).

Это статья из цикла заметок по CSS анимации и эффектам.

Одна из самых простых и популярных анимаций, она действует следующим образом: при наведении элемент немного увеличивается, как бы «выделяясь» на фоне остальных. Такой эффект отлично подходит для кнопок, карточек, изображений и иконок.

Как это работает

Анимация основана на двух вещах:

• Свойства transform: scale и transition — масштабируют элемент и делают это плавно.
• Псевдокласс :hover — срабатывает при наведении.

Пример, того как это выглядит (наведите курсор на любую карточку):

Вот пример на чистом CSS / HTML

Стили:

Вариации

• scale(1.05) — увеличивает размер на 5%. Можно изменить на 1.1 или даже 1.2 для более заметного эффекта.
• Время (0.3s) и тип перехода (ease) можно менять под стиль вашего сайта.
• Добавьте transform-origin, чтобы задать точку масштабирования (например, сверху, по центру и т.д.):

Где и когда использовать

• Кнопки действий (CTA)
• Изображения в галереях
• Карточки товаров или статей
• Иконки соцсетей

Когда лучше избегать

• Когда много интерактивных элементов рядом — анимация может перегрузить интерфейс.
• На мобильных устройствах, если нет :hover, может не сработать (хотя можно адаптировать под :active или JavaScript).