Progress value is 30%

Image Zoom

A lightbox plugin to zoom on an image on click.

View Demo


All components are based on CodyFrame.

If you're using this component, you should also include the SCSS/JS of the following components:

How To

The Image Zoom component is used to reveal a bigger version of an image on click, with a morphing transition from the first (preview) image to a bigger version of the same image.

Add a data-img attribute to the .image-zoom element to pass the path of the zoomed image. If no data-img is passed, the url of the .image-zoom__preview is used.

For the animation to work properly, the preview and the zoomed images need to have the same aspect ratio.

To disable the morph effect, add a data-morph="off" to the .image-zoom element.

🌅 Demo photo by JC Gellidon on Unsplash.


Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.