How to Create Zooming Effect on Hover Using CSS
Step 1: Adding HTML
<h1>Zoom on Hover</h1> <p>Hover over the div element.</p> <div class="zoom"></div>
Step 2 : Adding CSS
* { box-sizing: border-box; } .zoom { padding: 50px; background-color: blue; transition: transform .2s; width: 200px; height: 200px; margin: 0 auto; } .zoom:hover { -ms-transform: scale(1.5); /* IE 9 */ -webkit-transform: scale(1.5); /* Safari 3-8 */ transform: scale(1.5); }
Full Code and Output :
How to Create Zooming Effect on Hover Using CSS
You may Also Like