v150 · CSS · Animation · demo

Zoom Gallery

Hover any card — zoom transitions from 1 to 1.08, expanding the card's layout footprint and gently nudging its neighbours. No JavaScript, no transform.

Hover (or focus) a card to trigger transition: zoom 0.3s ease. Notice how surrounding cards shift to make room — layout is live.

Ocean Blue

#0022ff

Emerald

#0a8f5c

Rose

#d11a2a

Amber

#b87b00

Stone

neutral

Ink

dark

Why zoom, not transform? transform: scale(1.08) would scale visually but the card would still occupy its original footprint — siblings don't move. zoom: 1.08 resizes the element in the layout flow, so the grid genuinely reflows. You can see both in the Zoom vs Scale comparison.

/* Chrome 150 — smooth zoom transition in layout flow */
.card {
  zoom: 1;
  transition: zoom 0.3s ease;
}

.card:hover {
  zoom: 1.08;
  /* siblings shift; layout is live */
}

/* transform: scale(1.08) would NOT move siblings */

scenario focus

Select a scenario to focus its rendered example and summary.

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗

see also

scenario focus

implementation reference