How to scale an element on hover

Short answer

The scale property enlarges an element, and transition makes it smooth:

<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 is the original size, 1.08 is 8% larger, 0.9 is smaller.

Zooming an image inside a frame

A common catalog trick: the frame stays put while the image inside zooms in. A wrapper with overflow: hidden clips what goes past the edge:

<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>

Why not width

Enlarging with width and height moves the neighboring elements and makes the browser recalculate the layout. scale draws the element larger without changing its place in the flow, and animates smoothly even on slow devices.

Common mistake

A scaled element overlaps its neighbors or gets clipped by a parent with overflow: hidden. Leave some room around the cards with gap or padding on the container, and large scaling above 1.1 usually looks crude.