How to Zoom Images like Medium

By Jake Rocheleau. in Toolkit. Updated on July 17, 2022.

The blogging platform Medium uses a custom image zooming effect on their blog pages. Whenever the user clicks an image it’ll automatically zoom into a larger size.

It’s a great effect and certainly unique to Medium, but it was never something that could easily be copied.

Now, with the MediumLightbox script, it’s easier than ever. This JS script is lightweight and easy to add into any website or blog.

If you’d like to see how this works you can visit the live demo page hosted by creator Davide Calignano.

He spent a while nailing down the exact transition and custom animation effect to create a mirror image of Medium’s image zoom. The entire library is written in pure JavaScript, so it doesn’t rely on any 3^rd party scripts such as jQuery.

You will need to know a little JS to set it up but you certainly don’t need to be an expert.

Each image can take data-* attributes for setting the full-sized height & width, all of which are pulled dynamically from the lightbox plugin. The setup code is very simple and it can target the images themselves, or containers like the <figure> element.

Here’s the single code snippet you need to get the plugin running:

MediumLightbox('figure.zoom-effect');

Inside the function, you’ll pass a selector for all elements (e.g. <figure>) with the .zoom-effect class. This class is specifically defined in the MediumLightbox stylesheet, so it’s the best to use this on your page, too.

And, once that’s set up, you’re all set!

In your page content area, you can wrap all images into a <figure> tag using this class. They’ll automatically get this beloved Medium click-to-zoom effect for both desktop and mobile users.

To download a copy of this script and get started, just visit the main GitHub repo. Here, you’ll also find documentation along with code snippets you can copy to get set up fast.