Как увеличить элемент при наведении

Короткий ответ

Свойство scale увеличивает элемент, а transition делает это плавно:

<style>
  .card { width: 160px; padding: 16px; margin: 16px; background: lavender; border-radius: 12px; transition: scale 0.2s; }
  .card:hover { scale: 1.08; }
</style>
 
<div class="card">Hover to grow</div>

1 — исходный размер, 1.08 — на 8% больше, 0.9 — меньше.

Зум картинки в рамке

Частый приём в каталогах: рамка остаётся на месте, а картинка в ней приближается. Обёртка с overflow: hidden обрезает то, что вышло за край:

<style>
  .frame { width: 240px; overflow: hidden; border-radius: 12px; }
  .frame img { display: block; width: 100%; transition: scale 0.4s; }
  .frame:hover img { scale: 1.15; }
</style>
 
<div class="frame"><img src="/media/photo-400x250.jpg" alt=""></div>

Почему не width

Увеличение через width и height двигает соседние элементы и заставляет браузер пересчитывать раскладку. scale рисует элемент крупнее, не меняя его место в потоке, и анимируется плавно даже на слабых устройствах.

Частая ошибка

Увеличенный элемент наезжает на соседей или обрезается родителем с overflow: hidden. Оставьте вокруг карточек немного места через gap или padding у контейнера, а сильное увеличение больше 1.1 обычно выглядит грубо.