Zoom

The zoom property of CSS is useful in controlling the magnification level of elements.

zoom is a non-standard property of CSS and it is advisable to use the transform: scale() function for the same output.

Possible Values

normal: Specifies that the element should be rendered at its normal size.
reset: Specifies that the element should not de(magnify), unless the user applies non-pinch-based zooming. Not recommended, instead use unset value.
<percentage>: Any percentage value called zoom factor.
- Value equal to 100% is normal.
- Value more than 100% means element should zoom-in.
- Value less than 100% means element should zoom-out.
<number>: Any number value that corresponds to a percentage value. For example: 1.0 = 100% = normal.
- Value equal to 1.0 is normal.
- Value more than 1.0 means element should zoom-in.
- Value less than 1.0 means element should zoom-out.

Applies to

All the HTML elements.

DOM Syntax

object.style.zoom = "normal | reset | <number> | <percentage>";

CSS zoom – normal Value

Here is an example:

<html><style>
   p.normal {
      zoom: normal;
   }
   p.percent {
      zoom: 170%;
   }
   p.number {
      zoom: 4;
   }
   p.unset {
      zoom: unset;
   }
</style><head></head><body><p class="normal">Normal size</p><p class="percent">Zoom in percentage</p><p class="number">Zoom in number</p><p class="unset">Zoom settings reverted.</p></body></html>

CSS zoom – <percentage> Value

Here is another example:

<html><head><style>
   div.box {
      height: 50px;
      width: 50px;
      display: inline-block;
      padding: 5px;
      border: 1px solid black;
   }
   div#m {
      background-color: orange;
      zoom: 200%;
   }
   div#n {
      background-color: lavender;
      zoom: 1.5;
   }
   div#o {
      background-color: palevioletred;
      zoom: normal;
   }
</style></head><body><div id="m" class="box"></div><div id="n" class="box"></div><div id="o" class="box"></div></body></html>

CSS zoom – With number Value

Here is an example, where the h1 element gets zoomed on hover:

<html><head><style>
   p {
      border: 1px solid red;
   }
   p.percent {
      zoom: 170%;
   }
   p.number {
      zoom: 4;
   }
   h1:hover {
      zoom: 250%;
      text-decoration-line: underline;
   }
</style></head><body><h1>Hover to Zoom</h1><p class="percent">Zoom in percentage</p><p class="number">Zoom in number</p></body></html>

CSS zoom – With Animation

Here is an example, where the animation is added on hover along with zoom:

<html><head><style>
   div.box {
      width: 25px;
      height: 25px;
      vertical-align: middle;
      display: inline-block;
      transition: transform .5s;
      padding: 10px;
   }
   div#a {
      background-color: rgb(58, 220, 22);
      zoom: normal;
   }
   div#b {
      background-color: rgb(239, 86, 137);
      zoom: 200%;
   }
   div#c {
      background-color: rgb(223, 217, 44);
      zoom: 2.9;
   }
   div.box:hover {
      transform: scale(1.5);
   }
</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>