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
Step 2: Add zoom effect for above element with some CSS code below
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)
Hover the box to see the effect in the Demo below:
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)
Hover the box to see the effect in the Demo below: