CSS - zoom Property

Quiz

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>
    .normal {
        zoom: normal;
    }
</style>

<head>
</head>

<body>
    <h2>CSS zoom Property</h2>
    <p class="normal">CSS zoom with normal value.</p>
</body>

</html>

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>

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>

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 {
      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>

Print Page