Toggle project menu
Feeling lost? Feel free to get in touch!
A lightbox plugin to zoom on an image on click.
All components are compatible with CodyFrame, Tailwind CSS or any other CSS framework.
To use this component, include the following dependencies:
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.
Component Github page ↗
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
Create a CodyHouse account to unlock members-only features and join our community of web designers!
Error: email or password not valid. Need help? Contact us.
or create an account
There was an error while trying to export your project. Please try again or contact us.