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

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

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

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

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

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

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

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

Карточка 1
Карточка 2
Карточка 3

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

Стили:

Вариации

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

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

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

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

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

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

Мигание курсора или другого элемента с помощью CSS

Апрель 29, 2025 г.

Мигание — простой и при этом заметный визуальный эффект. Чаще всего используется для имитации текстового курсора или привлечения внимания к какому-то элементу (например, "новинка", "онлайн", и т.д.). Это статья из цикла заметок по CSS анимации и эффектам. ...

Читать

Анимация свечения (мерцание)

Апрель 18, 2025 г.

Здесь мы разбираем CSS анимацию - мерцание. Это статья из цикла заметок по CSS анимации и эффектам. Эта анимация создаёт эффект мягкого свечения вокруг элемента, будто он излучает свет. Часто используется для привлечения внимания к кнопкам, ...

Читать

Медленное вращение — добавим динамики логотипу

Апрель 24, 2025 г.

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

Читать

Анимация: Изменение цвета текста при наведении

Май 2, 2025 г.

Когда пользователь наводит курсор на текст (например, ссылку, заголовок или кнопку), его цвет плавно меняется. Это один из самых простых, но эффективных способов добавить интерактивности и визуальной обратной связи на сайт. Это статья из цикла заметок ...

Читать
 

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

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



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