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.
<html><style></style><head></head><body><h2>CSS zoom Property</h2><p class="normal">CSS zoom with normal value.</p></body></html>.normal { zoom: normal; }
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.
<html><head><style>.box { height: 50px; width: 200px; border: 1px solid black; text-align: center; transition: all 0.3s ease; position: relative; }.box:hover { zoom: 2; }.box::before { content: "This is a normal box"; }.box:hover::before { content: ""; }.box:hover::after { content: "This is after applying zoom with percent value."; display: block; position: absolute; width: 100%; text-align: center; } </style></head><body><h2>CSS zoom Property with Percent</h2><div class="box"></div></body></html></pre>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.
<html><head><style>.box { height: 50px; width: 200px; border: 1px solid black; text-align: center; transition: all 0.3s ease; position: relative; }.box:hover { zoom: 2; }.box::before { content: "This is a normal box"; }.box:hover::before { content: ""; }.box:hover::after { content: "This is after applying zoom"; display: block; position: absolute; width: 100%; text-align: center; } </style></head><body><h2>CSS zoom Property with Number</h2><div class="box"></div></body></html></pre>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.
<html><head><style> div.box {} div#a {width: 25px; height: 25px; vertical-align: middle; display: inline-block; transition: transform .5s; padding: 10px;} div#b {background-color: rgb(58, 220, 22); zoom: normal;} div#c {background-color: rgb(239, 86, 137); zoom: 200%;} div.box:hover {background-color: rgb(223, 217, 44); zoom: 2.9;} </style></head><body><h1>Animation added on hover</h1><div id="a" class="box"></div><div id="b" class="box"></div><div id="c" class="box"></div></body></html>transform: scale(1.5);
Leave a Reply