I found many user who demanded simple image zoom on hover feature, so i write this tutorial for them.
In this, we have created simple image zoom feature on hover using CSS only. No jQuery plugin is used in this, just simple CSS code used.
If you are looking for full animation zoom effect then i wrote another post which shown wonderful example to Zoom Image On Mouseover Using jQuery plugin. Have a look it.
Zoom Image on Mouse Hover using CSS
Let’s check out the example of image zoom on mouse hover.
I have used zoom/scale element on hover event with CSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } .imgzoom { padding: 50px; transition: transform .2s; width: 200px; height: 200px; margin: 0 auto; } .imgzoom:hover { -ms-transform: scale(2.5); /* IE 9 */ -webkit-transform: scale(2.5); /* Safari 3-8 */ transform: scale(2.5); } </style> </head> <body> <div align="center"> <h1>Image Zoom on Hover</h1> <img class="imgzoom" src="flower.jpg" alt="This zooms-in really well and smooth"> </div> </body> </html> |
