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

 Zoom box content

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);
}

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)