🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Image Zoom

A lightbox plugin to zoom on an image on click.

Copy: View demo

Dependencies

All components are based on CodyFrame.

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

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