Transform
zoom
zoom enlarges or shrinks an element along with its contents. Unlike scale, it pushes surrounding elements away as it grows.
Syntax
<number [0,∞]> | <percentage [0,∞]>Preview
1234
Presets
Sample
Drag the bottom-right corner to resize
Code
.box {
display: flex;
align-items: flex-start;
}
.box > :nth-child(2) {
zoom: 1.5;
}Controls
zoom1.5
1234
About
Writing the value
1 is the original size, 2 is double and 0.5 is half. Percentages such as 150% work too. Negative values are invalid, and 0 is treated like 1 for compatibility. The initial value is 1.
How it differs from scale
zoom multiplies the lengths themselves: widths, padding, font sizes and so on. The element really gets bigger, so the layout around it moves. The preview sets it on the second item, so the third and fourth items get pushed along.
scale and transform: scale() only magnify how the element is drawn. It keeps its original footprint, so it overlaps its neighbors.
Watch out
- Lengths given as percentages or auto do not change. An element with
width: 50%andzoom: 2stays half as wide as its parent; only the text and spacing inside grow. zoomis not inherited, but the lengths of descendants are magnified along with it. Nested values multiply:zoom: 2insidezoom: 2is four times the size.- It was non-standard for a long time and Firefox did not support it. It is now specified, and Firefox supports it from version 126.