jQuery Zoom Image on Hover

Image zoom on hover can be really a nice feature. Specially when you have a shopping cart website or a blog, image zoom feature add some stars in user experience.

I know there are lots of “jQuery zoom image on hover” plugins available on the internet. But I don’t think so to use jquery plugin for that because it is very simple to do. So in this tutorial I am going to show you how to zoom image on hover using jquery.

HTML:

CSS:

I used overflow:hidden; property in .img-container just to wrap images with in the border. Rests of the properties are for design purpose.


jQuery:

I used $("img") selector which means this hover function will apply on all images of a page. jQuery hover() function has 2 parameters. First is for mouse enter and second is for mouse out. In First parameter I used animate() function that actually creates a zoom effect using css properties. In the second parameter which is mouse out I again used animate() function to get image to its original state.

All jQuery Zoom Image on Hover Code Together

 

Author: Ahsan Zameer

I am a web developer and love to search new stuff on web. Trying different approaches and ideas to make web developing more interesting and enjoyable.