CSS - zoom Property
CSS - zoom Property
The zoom Property
CSS zoom property is used to control the magnification level of HTML elements. The zoom property is a non-standard property of CSS and it is advisable to use the scale() function with the transform property to achieve the same output.
Syntax
The syntax for the CSS zoom property is as follows:
zoom: normal | percentage | number;Possible Values
| Value | Description |
|---|---|
| normal | It specifies that the element should be rendered at its normal size. |
<percentage> | It specifies the zoom factor in percent value. A value equal to 100% specifies normal size. The value less than 100% specifies zoom-out, and the value more than 100% specifies zoom-in. |
<number> | It specifies the zoom factor in the number value. A value equal to 1.0 specifies normal size. The value less than 1.0 specifies zoom-out, and the value more than 1.0 specifies zoom-in. |
Applies to
The zoom property can be applied to all the HTML elements.
CSS zoom Property with normal Value
The normal is the default value of the zoom property. The element appears at its regular size with zoom:normal .
Example
In this example, we have used the default value(normal) of the zoom property.
CSS zoom Property with percent Value
You can use the zoom property with percent value to add a zoom-in or zoom-out effect to any element.
Example
In this example, we have used the percentage value > 100% to create a zoom-in effect on a div box upon hovering over it.
CSS zoom Property with numeric Value
To add a zoom-in or zoom-out effect to any element, you can use the zoom property with a numeric value.
Example
In this example, we have used the numeric value > 1 to create a zoom-in effect on a div box upon hovering over it.
CSS zoom Property with Transition
You can use transition with the zoom property to create a smooth zoom-in or zoom-out effect.
Example
In this example, we have created three div boxes that create a smooth zoom-in effect upon hovering over them.