Lightense Images

By on

A dependency-free pure JavaScript image zooming library less than 2 KB (gzipped). Inspired by fat/zoom.js and tholman/intense-images.

This library is mainly used by Almace Scaffolding.


  • High performance
  • One script, no additional dependencies, no bloated styles
  • Safari backdrop-filter support
  • 2 KB gzipped


$ npm install lightense-images --save
  • Or download library and save it to your project
  • Or host it on a CDN and reference it via <script></script> tag

The Lightense library is wrapped in Universal Module Syntax (UMD), this means that out of the box, you can include it into your web application via <script></script> tag, import, or require('lightense-images').


Configuration object:

Lightense(elements, {
  time: 300,
  padding: 40,
  offset: 40,
  keyboard: true,
  cubicBezier: 'cubic-bezier(.2, 0, .1, 1)',
  background: 'rgba(255, 255, 255, .98)',
  zIndex: 2147483647

Inline data configurations:

<img src="image.png"
  data-lightense-cubic-bezier="cubic-bezier(.2, 0, .1, 1)"
  data-lightense-background="rgba(255, 255, 255, .98)"


<img src="photo.jpg">
  window.addEventListener('load', function () {
  }, false);

Custom Background Color

<img src="screenshot.png" data-lightense-background="rgba(0, 0, 0, .96)">

Custom Padding

<img src="screenshot.png" data-lightense-padding="0">

Disable Lightense for Specific Elements

<img src="photo.jpg" class="no-lightense">
  window.addEventListener('load', function () {
  }, false);


Browser Support

All modern browsers, it “should work” in Internet Explorer 10 and up as well.

Love this?

Please consider buying me a cup of coffee.