Medium-Style Image Zoom Animation – ZoomableImage

Disrupting reading flow with jarring lightbox popups is a thing of the past. The ZoomableImage is designed to revolutionize image interaction on your website. Inspired by the elegant zoom functionality of Medium.com, this JavaScript library lets visitors explore visuals without compromising the reading experience.

Click an image, and it gracefully expands to full size, taking center stage with a subtle overlay. Need to return to your content? A simple interaction with the page, like scrolling or clicking, will automatically dismiss the overlay, returning the image to its original position.

How to use it:

1. Wrap your image to the <zoomable-image /> custom element.

<zoomable-image>
  <img
    src="1.jpg"
    alt="Image 1"
  />
</zoomable-image>

2. Download and load the main script at the end of the document. That’s it.

<script src="./script.js"></script>