Abakada: Back to Basics > Language References > CSS Properties > Display and Position Properties > zoom Property

---

Changes the size of an element.

CSS	{ zoom: number | percentage }
Script	object.style.zoom = number | percentage

number	Positive floating point number indicating a zoom factor.
percentage	Value expressed as a percentage indicating a zoom factor.

The property is read/write with a default value of 1; the CSS attribute is not inherited.

The zoom property allows changing the dimension of elements.

zoom may be specified as a number or percentage zoom factor.

Numbers smaller than 1.0 indicate a zoom-out or minification effect, while numbers greater than 1.0 indicate a zoom-in or magnification effect.

zoom: 0.5	zoom: 1.5

Zero and negative values are ignored and the object remains unchanged.

This property is similar in function to using the scale property, and in certain cases can be used as an alternative. The difference lies in how the element is scaled.

zoom scales the targeted element from the top and center, which can affect the page layout. In contrast, elements adjusted using scale scales from the center by default, which does not cause layout recalculations or move other elements on the page.

Overflow only comes into effect if using scale makes the contents larger than the containing element.

Another difference worth noting is that not all browsers support using a transition with zoom. As of this writing, only Mozilla^® does.

The following example demonstrates the effect of applying zoom to a section of text.

Run Sample View Source

The following example demonstrates using zoom with the rotate and transition properties. Note though that the transition on the zoom will work only on browsers that support it.

Run Sample | View Source

NOTE:

scale, transform: scale( )