Image Zoom Effect With jQuery

/ Javascript, jQuery / by Paul Robinson / 30 Comments
This post was published back on August 5, 2010 and may be outdated. Please use caution when following older tutorials or using older code. After reading be sure to check for newer procedures or updates to code.

As I said this effect would probably be useful for e-commerce sites, but I don’t see any reason why you can’t use it for any other sites. The basic idea is to have the image ‘zoom’ forward & show an approximately 25% larger version of the image. So let’s get on with it.

There is a little bit of a caveat with this effect. Your images must be big enough to allow for a 25% increase in size to avoid image degradation. For example if you want to make your images 100 pixels you will need images 125 pixels in size (25% of 100 is 25).

jQuery Zoom Effect: HTML

First let’s look at the HTML. Really all you need is a image with a hyperlink around it. Like this:

To make targeting easier you could give your hyperlink a class like I have. This would enable you to give all hyperlinks with that class the zoom effect.

jQuery Zoom Effect: CSS

We need to set up some CSS to help with the zoom effect. So let’s take a look.

This is just the important part of CSS. If you do not add these it probably won’t work correctly. As for styling? Well it’s up to you. One important thing is that you will need to adjust the height to be the size you wish your images to display at without the 25% increase.

jQuery Zoom Effect: jQuery

Before I explain the jQuery code let’s take a look at the entire script:

I have tried to write this so it is ambiguous to the width & height and works out the 25% increase itself. I’ll explain all you need to do to make it work at the end, but first let’s go through how it works.

First we have the standard DOM ready event. Next the selector. If you have used a different class to zoom you will need to change it there. It basically says for every element you find that is a hyperlink and has the class zoom do the following.

Next we work out some variables. First what is the image’s height & width, next what is that height & width plus 25%, finally the position shift needed to make it look as if the image is resizing from it’s center. The children(0) selects the image element as it is the only child of the a.zoom element.

Next we use the mouseenter event. We set it’s z-index to bring it above any other elements nearby, then select the image again, cancel any animations that may be still running on this element, then animate the width, height, top and left positions to make the image zoom from it’s center point. If you wish to slow or speed the animation you can change the 210 number that follows. It is in milliseconds.

Finally we use the mouseleave event. This does the exact reverse of the enter event. We select the image, stop any animations, then set the width, height, top, and left back to their original values. Then using the callback function we make sure the height is back to it’s original value, then select the parent and reset the z-index.

You may be asking why set the index on the hyperlink? In testing, if I set the index only on the image nearby elements would cover the hyperlink’s click event.

jQuery Zoom Effect: Instructions

To get it up and running quickly all you need to do is have jQuery attached, copy the jQuery code into your page (between script tags), and then change the selector on line 2 of the code to whatever you need. Just remember if you don’t set a width or height in your CSS the image will be made 25% bigger than it’s actual dimensions and it may cause the image to degrade.

jQuery Zoom Effect: Demo

Here is a demo of the effect. You may note that it looks similar to an effect which was achieved using only CSS in my post looking at CSS transforms & transitions.

jQuery Zoom Effect: Important Notes

One minor bug I have noticed with this effect is that using auto margins to center the image will stop the jQuery code from working in the correct manner. Instead of resizing from the center it will resize from the right or left side of the image. To fix this place a div element around the image with the width & height of the image before the zoom effect & center that with a margin.

Another small bug is that to because the image is positioned relatively & not absolutely you will need to place it inside a element with a height if you do not want the resize to effect (move down) any of the elements below it.

I hope this tutorial has been helpful. I also want to apologise to everyone for the gap in posts. I’ve been struggling to come up with new ideas recently. Let’s call it writers block… As always though, I’m here to help. If you have any problems or questions about this tutorial let me know & I’ll help you out as soon as I can.


Author’s gravatar

Is it possible clicking on large image the page should go on given URL?

Author’s gravatar author


It should be possible.

The reason the demo doesn’t go anywhere (even though it is linked) is because I have disabled the link. You should just be able to change the URL in the hyperlink around your image & it should go when clicked.

Author’s gravatar

Thank you so much for your reply… but my problem is still not solved. Please checkout this link: This is flash website but I want to create same image zoom effect using jQuery with hyperlink. In this the popup is having different image. I am tired looking for any tutorial helping me in this. Please help me with this to create same effect using jQuery.

Thank you for your help.

Author’s gravatar author

What exactly is it that isn’t solved?

In the example you’ve given the image zoomed is the same image as the unzoomed one. It just uses one of Flash’s many image effects to saturate the image slightly. That is possible in jQuery (using a canvas plugin) but would be quite difficult to do.

The hyperlink should already be available.

Author’s gravatar

Please visit this page: .The normal image is having text on it where as zoom in image is not having text. Also I have tried putting URL but it is not going on page.

Author’s gravatar author

Not sure why your hyperlink isn’t working. My demo on this page doesn’t work simply because I added:

into the code to stop it from working.

The text is probably a separate item rather than on the image. It could probably be done by placing text in a container around the image and adjusting it using CSS. Then as the image zooms it should cover the text over. I’m not sure if that would work though as CSS z-index is a strange thing to predict.

Author’s gravatar

Thanks. The link is working fine. Regarding the text on the image that effect is a SWF file… so that is done in flash. Do you have any solution to show separate image in zoom in rather than resizing it with same effect?

Author’s gravatar author

Yes, that is a Flash file, but when you build it in Flash Professional it still has layers or text images etc. It is probably done by adding text on top of the image and the have the image move above the layer the text is on. You can use a similar technique in jQuery, but I’m not sure how well it would work.

I don’t have a tutorial like that unfortunately. You could try placing the path to the second image in the rel attribute of the hyperlink and have jQuery grab it and replace the image src with it.

That may work, although I’m not sure as I haven’t tested it.

Author’s gravatar

I am sorry but I am not bale to paste my code. images/popup/home_l.jpg is the popup image i want in zoom in. Can you please help me to put it in yr code? I am new to jquiery. Thanks

Author’s gravatar author

Just tested the code out & it works perfectly (provided your images are small to avoid preloading problems).

To make it work you just need add in the path to the alternate image in the rel attribute of your hyperlink. Like this:

It just instantly swaps out though, unlike the flash which seems to fade, but that is a limitation of this method unfortunately.

Author’s gravatar

Please check my code: its not working:

Author’s gravatar author

There isn’t anything wrong with the code you’ve given. You’ve just missed the dollar sign ($) off the front of the first line of jQuery. It should say:


for no conflict mode.

Author’s gravatar

This is what I want to achive using jQuery:

Author’s gravatar author

The only thing I can think of that would cause that is the fact you have your content in a table. When the image enlarges it seems to be trying to keep the content at the width you gave it. So it resizes everything to fit.

You can only really fix it by trying to make your image positioned absolute in a relative container or remake the page so it isn’t in tables & doesn’t use percentages.

Author’s gravatar

heh thanx dude for great tutorial

Admin Edit: Glad you liked the tutorial but, no advertising your website inside the comments please.

Author’s gravatar

okie dude..anyways you are great designer

Author’s gravatar author

Sadly I didn’t design the theme, I did build it though. Thank you anyway.

Author’s gravatar

Hello it works perfectly until i use it on a div that ive hidden and then shown with jquery, any ideas why?

Author’s gravatar author

Hi Barbara,

I’m not sure exactly on this, but it could be that when you hide the element it destroys the event attached to it. If that is correct you might be able to fix it by using code like this instead:

That should fix the problem and allow jQuery to monitor any hyperlink element (a) with the class zoom regardless of if it has been hidden & then revealed or not.

Please let me know if it works for you, or if you have any problems.

Author’s gravatar

Hi Paul,

You reversed top and left in your code on lines 14 and 15. It confused me for a bit.


Author’s gravatar

Really great tutorial, by the way. Super clear and easy to follow. 🙂

Author’s gravatar author

Hi David,

No problem & thank you for letting me know about that problem. I’ve corrected it to help save any further confusion. 😉

Author’s gravatar

Love this effect but I am looking for a script or demo that would have an arra or 2 paragraph of images and when you mouse over on one, another one next to one you are doing mouse over would shrink but the one you mouse over would zoom in. Once mouse is moved to another image, another image would zoom in and images near it would zoom out. Is there such script somewhere?

I’ve been searching for it for 2 days 🙁

Author’s gravatar author

Hi Alexandra,

I’m not sure I understand fully what you are looking for, but no I’ve never heard of a script like that.

Author’s gravatar


Thanks for the tutorial it was really good and helpful!
However, for my website I’m looking for something that will open up into a new pop-up window where you can zoom in/out of the picture when it is clicked on by the user, and was wondering if you can help me with that since I’m a novice with coding

Thanks again

Author’s gravatar author

Hi Idrees,

I think you are looking for a lightbox script, but I don’t know of any that allow you to zoom in on the image after it has opened.

It would be very complicated to build, but there may be one out there already. I’m afraid I don’t have time to look due to work, but if you try searching Google for jQuery lightbox you might have some luck. You could also try MooTools, and Prototype if you aren’t limited to jQuery as a JS framework.

Older Comments
Newer Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

I'll keep your WordPress site up-to-date and working to its best.

Find out more