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)
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)
Latest
Related
No data available!
© 2019 4codev
Created with love by Sil.