Create the smooth zoom effect on hover an element with CSS

There are many ways to create the smooth zoom effect, but this way will show you we can do that easily with CSS.

Step 1: Create a HTML element with class called "zoom-box" like this

 <div class="zoom-box">Zoom box content</div>

Copy this code

Step 2: Add zoom effect for above element with some CSS code below

 .zoom-box {
 padding: 30px;
 background-color: rgb(41, 144, 204);
 transition: transform 0.5s;
 width: 200px;
 height: 200px;
 margin: 0 auto;
 box-sizing: border-box;
 color:#fff;
 font-size: 20px;
 display: flex;
 justify-content: center;
 align-items: center;
 text-align: center;
 border:5px solid #444;
}

.zoom-box:hover {
 -ms-transform: scale(1.5);
/* for IE 9 */
 -webkit-transform: scale(1.5);
/* for Safari 3-8 */
 transform: scale(1.5);
}

Copy this code

In this example, we use the transition property of the CSS with transition-property is transform (transition-duration is 0.5s )
In the hover event, we use the transform property with the 2D scale transformation (1.5 times)