Go to homepage

Projects /

Image Zoom

A lightbox plugin to zoom on an image on click.

View Demo

Dependencies

All components are compatible with CodyFrame, Tailwind CSS or any other CSS framework.

To use this component, include the following dependencies:

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.

To change the custom cursor image in CSS, create an SVG image and convert it using an 'SVG to Data URI' converter. For the PNG fallback, use a PNG to Data URI converter.

🌅 Demo photo by JC Gellidon on Unsplash.

 

Categories

Bug Report & Feedback

Component Github page ↗

Level up your CSS skills

Each month we email a 1-minute CSS tutorial to 20K developers

Awesome! We just sent you a confirmation link by email

Error - please try again or contact us

Your email address is already subscribed

Project duplicated

Project created

Globals imported

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