The **`zoom` property** specifies the scale by which an object is magnified. It is a non-standard property and was introduced by Internet Explorer. The `zoom` property is only supported by some browsers including IE, Chrome, and Safari. 

The illustration below explains what the `zoom` property does. 

# Parameter
`zoom` takes a single parameter (a whole number) that defines the percentage of magnification. 


**Initial image:**



![](/api/edpresso/shot/6660653441875968/image/6257635319873536)

Check out the code below to understand how `img-hover-zoom` is implemented. The picture is magnified when the user hovers over the image with their mouse. 

/*The container */
.img-hover-zoom {
  height: 300px; /* Set it as per your need */
}

/* Transition property for smooth transformation of images */
.img-hover-zoom img {
  transition: transform .5s ease;
}

/* Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
  transform: scale(1.5);
}

codemirror

Check out the code below to understand how `zoom` is implemented. 

What is the zoom property in CSS?

The zoom property scales object magnification and is supported by IE, Chrome, and Safari.