Component
Image Zoom Repeat on Hover
This is a Framer recreation of the image zoom repeat effect but on hover, based on telescope's website. Remix the project or grab the component to bring this hover interaction to your own project.
Created by
About the resource
To create the image zoom repeat on hover, I used two versions of the same image—one full image with a background, and several cut-out layers of the same image without background. These cut-outs are stacked within the full image frame. In the default variant, all layers (the cut-outs) are set to the same scale. In the hover variant, each cut-out is scaled down incrementally (for example: from 0.8 to 0.3), creating a layered zoom-out effect.
Finally, I connected the variants using Mouse Enter and Mouse Leave interactions to trigger the zoom animation on hover.
About the resource
To create the image zoom repeat on hover, I used two versions of the same image—one full image with a background, and several cut-out layers of the same image without background. These cut-outs are stacked within the full image frame. In the default variant, all layers (the cut-outs) are set to the same scale. In the hover variant, each cut-out is scaled down incrementally (for example: from 0.8 to 0.3), creating a layered zoom-out effect.
Finally, I connected the variants using Mouse Enter and Mouse Leave interactions to trigger the zoom animation on hover.
About the resource
To create the image zoom repeat on hover, I used two versions of the same image—one full image with a background, and several cut-out layers of the same image without background. These cut-outs are stacked within the full image frame. In the default variant, all layers (the cut-outs) are set to the same scale. In the hover variant, each cut-out is scaled down incrementally (for example: from 0.8 to 0.3), creating a layered zoom-out effect.
Finally, I connected the variants using Mouse Enter and Mouse Leave interactions to trigger the zoom animation on hover.
The default and hover variants of the image zoom component in Framer.
The default and hover variants of the image zoom component in Framer.
The default and hover variants of the image zoom component in Framer.
