Modern Image Zoom (Lightbox) In JavaScript

Category: Javascript , Modal & Popup | December 17, 2020
Views Total:4,227 views
Official Page:Go to website
Last Update:December 17, 2020


Modern Image Zoom (Lightbox) In JavaScript


A lightweight, blazing-fast, framework-agnostic JavaScript lightbox library for zooming image as you seen on popular blogging platforms like

How to use it:

1. Install & import the image zoom as an ES module.

# Yarn
$ yarn add mvoloskov/image-zoom
$ npm i mvoloskov/image-zoom --save
import imageZoom from 'image-zoom'

2. Or load the compiled JavaScript image-zoom.js from dist folder.

<script src="dist/image-zoom.js"></script>

3. Initialize the library and it will automatically apply the image zoom effect to all images found within the document.


4. Or determine which images should be opened in the lightbox.

imageZoom('img, svg')

5. Override the default styling of the image lightbox.

:root {
  overflow-x: hidden;
.image-zoom-wrapper::after {
  opacity: 0;
  transition: opacity 150ms cubic-bezier(.25, .1, .25 ,1);
  display: block;
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: black;
  z-index: 99998;
  pointer-events: none;
.image-zoom-wrapper.image-zoom-wrapper-zoomed::after {
  opacity: .6;
  cursor: zoom-out;
  pointer-events: all;
.image-zoom {
  transition: transform 300ms cubic-bezier(.25, .1, .25 ,1);
  cursor: zoom-in;
.image-zoom-zoomed {
  position: relative;
  z-index: 99999;
  cursor: zoom-out;

You Might Be Interested In:

Leave a Reply