/    /  CSS Zoom

CSS Zoom

 

This CSS property scales the content. It manages the magnification level of the content. Instead of using the CSS Zoom property, we can also use the transform: scale(); property.

 

Properties:

 

  • normal : It holds the normal content that does not zoom-out or zoom-in. It has the value zoom: 1.
  • number: The positive float value that indicates a zoom factor.
  • percentage: Its 100% value is equivalent to normal.

 

Example:

 

<!DOCTYPE html> 
<html> 

<head> 
  <title> 
    CSS zoom
  </title> 

  <style> 
    h1 { 
      color: red;                              
    }
  </style> 
</head> 

<body> 
  <center>          
    <h1>CSS zoom property</h1>           
    <div> 
             <h2>original image</h2>
      <img class="original" src= "good-morning.jpg"> 
    </div> 
  </center> 
<body> 

</html>

 

OUTPUT:

 

CSS Zoom

 

Example:

 

<!DOCTYPE html> 
<html> 

<head> 
  <title> 
    CSS zoom
  </title> 

  <style> 
    h1 { 
      color: red;                              
    } 
.magnify{
 width: 100px;
 height: 100px;
 border-radius: 30px;
 display: inline-block;
 color: white;
}
#m1 {
 background-color: blue;
 zoom: normal;
}
#m2 {
 background-color: yellow;
 zoom: 200%;
 color: black;
}
#m3 {
 background-color: green;
 zoom: 2.9;
}                      
p{
padding-top:20px;
}
  </style> 
</head> 

<body> 
  <center>          
    <h1>CSS zoom property</h1>            
<div id="m1" class="magnify"><p>zoom: normal;<p></div>
<div id="m2" class="magnify"><p>zoom: 200%;<p></div>
<div id="m3" class="magnify"><p>zoom: 2.9;<p></div>   
</center> 
<body> 

</html>

 

OUTPUT:

 

CSS Zoom