v150 · CSS · Layout · demo
Product Focus
An e-commerce card grid where hovering a product zooms it with a spring animation. Unlike transform: scale() the zoomed card pushes its siblings — it occupies the space it needs in the layout flow. Scroll down to compare both behaviors side-by-side.
Chrome 150+ — animatable
zoom. In older browsers the transition property has no effect on zoom; hover still works but without the animation.
Hover any card · notice how it pushes its neighbors · compare with the scale version below
zoom: 1.12 on hover (layout-affecting)
⌚
Apex Watch
€149
🎧
Arc Headphones
€289
📷
Lens Camera
€599
💻
Ultra Laptop
€1,199
🖱️
Flow Mouse
€79
⌨️
Key Keyboard
€119
zoom: hovered card grows and pushes its siblings — the layout reflows around it. Feels physical.
transform: scale(1.12) on hover (layout-frozen)
⌚
Apex Watch
€149
🎧
Arc Headphones
€289
📷
Lens Camera
€599
💻
Ultra Laptop
€1,199
🖱️
Flow Mouse
€79
⌨️
Key Keyboard
€119
transform: scale: card visually grows but its neighbours don't move — the grid layout is frozen. Feels like a layer floating above.
/* zoom IS layout-aware and now animatable */
.product-card {
zoom: 1;
transition: zoom 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); /* spring */
}
.product-card:hover {
zoom: 1.12; /* pushes siblings, reflows layout */
}
/* transform: scale is NOT layout-aware */
.product-card-scale {
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.product-card-scale:hover {
transform: scale(1.12); /* siblings don't move */
}see also
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗