How to zoom image with pure JavaScript

December 21, 2016

When you are building an e-commerce website, especially a showcase, a website gallery, a template selling website ..., you always need many good images for using and giving your visitors/customers the detailed view of your images (or your product).
I believe that every shopping website has ability zoom the product image. All of them are using jQuery plugins such as jQuery Zoom or EasyZoom
After I think how would I implements this plugin I realized that we do not need jQuery for that. So let us go step by step and implement image zoom without jQuery.

We will display a small image and set the background for figure element with the same image but without scaling. We are going to fade out the image and change background position of figure element based on cursor coordinates.

Now we got fully working image zoomer without jQuery or any additional plugins.
But wait, the post title is about pure CSS image zoom. Well, in is not actually true, but we can get rid of some javascript using the power of CSS variables.
At the moment of writing this post, css variables are supported in all browsers except Edge that currently is working in it's implementation.

At this moment you can use the polyfill if you care about Edge.
Let us change our CSS a bit:

If you need deep browser support you can stay on first variant of the code. The point of this post is to prompt developers to think twice before connecting heavy javascript libs from dinosaurs age because sometimes simple function is enough