How to zoom/scale an element on hover with CSS?


The zoom an element on hover, use the :hover selector. The scale() method of the transform property is used to zoom i.e. scale an element. The transition duration is set using the transition property. Let us see how to zoom/ scale an element on hover with HTML and CSS.

Scale a circle

To scale a circle, first, we have set a div −

<div class="zoomDiv"></div>

The transition for the div is set using the transition property −

.zoomDiv {
   padding: 50px;
   background-color: yellow;
   transition: transform 0.2s;
   width: 200px;
   height: 200px;
   margin: 70px;
   border-radius: 50%;
   border: 4px solid rgb(78, 37, 155);
}

On hover, use the :hover selector to set the transform property with the value scale().The scale(1) means the same shape and scale(1.5) means zoom in −

.zoomDiv:hover {
   transform: scale(1.5);
}

Example

To zoom/scale a circle on hover with CSS, the code is as follows −

<!DOCTYPE html>
<html>
<head>
   <style>
      * {
         box-sizing: border-box;
      }
      .zoomDiv {
         padding: 50px;
         background-color: yellow;
         transition: transform 0.2s;
         width: 200px;
         height: 200px;
         margin: 70px;
         border-radius: 50%;
         border: 4px solid rgb(78, 37, 155);
      }
      .zoomDiv:hover {
         transform: scale(1.5);
      }
   </style>
</head>
<body>
   <h1>Zoom on Hover Example</h1>
   <h2>Circle</h2>
   <p>Hover over the below element to see it zoom.</p>
   <div class="zoomDiv"></div>
</body>
</html>

Scale a rectangle

To scale a rectangle, first, we have set a div −

<div class="zoomDiv"></div>

The transition for the div is set using the transition property −

.zoomDiv {
   width: 200px;
   height: 100px;
   background: blue;
   border: 3px solid rgb(42, 0, 70);
   transition: transform 0.2s;
}

On hover, use the :hover selector to set the transform property with the value scale().The scale(1) means the same shape and scale(2) means zoom in −

.zoomDiv:hover {
   transform: scale(2);
}

Example

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      * {
         box-sizing: border-box;
      }
      .zoomDiv {
         width: 200px;
         height: 100px;
         background: blue;
         border: 3px solid rgb(42, 0, 70);
         transition: transform 0.2s;
      }
      .zoomDiv:hover {
         transform: scale(2);
      }
   </style>
</head>
<body>
   <h1>Zoom on Hover Example</h1>
   <h2>Rectangle</h2>
   <p>Hover over the below element to see it zoom.</p>
   <div class="zoomDiv"></div>
</body>
</html>

Scale a square

To scale a square, set a div −

<div class="zoomDiv"></div>

The transition for the div is set using the transition property −

.zoomDiv {
   width: 150px;
   height: 150px;
   background: orange;
   border: 3px solid blue;
   transition: transform 0.2s;
}

On hover, use the :hover selector to set the transform property with the value scale().The scale(1) means the same shape and scale(1.5) means zoom in −

.zoomDiv:hover {
   transform: scale(1.5);
}

Example

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      * {
         box-sizing: border-box;
      }
      .zoomDiv {
         width: 150px;
         height: 150px;
         background: orange;
         border: 3px solid blue;
         transition: transform 0.2s;
      }
      .zoomDiv:hover {
         transform: scale(2);
      }
   </style>
</head>
<body>
   <h1>Zoom on Hover Example</h1>
   <h2>Square</h2>
   <p>Hover over the below element to see it zoom.</p>
   <div class="zoomDiv"></div>
</body>
</html>

Updated on: 21-Dec-2023

502 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements