---
title: "Hover Zoom — Free Framer component · Best of Framer"
description: "Free Framer component · by Jurre · Backgrounds. Interactive Cursor-Based Image Magnifier The ZoomImage component adds a smooth, interactive hover zoom effect to any image in your Framer project."
canonical: "https://framer.elliotli.dev/component/hover-image-zoom"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Hover Zoom

# Hover Zoom

[View on Framer](https://framer.com/marketplace/components/hover-image-zoom/?via=elliot-li)

![Hover Zoom preview image 1](https://framer.elliotli.dev/og/component/hover-image-zoom/8b2bd2ea67d4713f/1600x1200.jpg)

## Summary

Interactive Cursor-Based Image Magnifier The ZoomImage component adds a smooth, interactive hover zoom effect to any image in your Framer project.

## Description

## Interactive Cursor-Based Image Magnifier

The ZoomImage component adds a smooth, interactive hover zoom effect to any image in your Framer project. When users hover over the image, it magnifies with a cursor-tracked transform origin, creating a dynamic and responsive zoom experience. This component is ideal for product showcases, portfolio previews, galleries, and interactive hero sections, offering a high-end, engaging interaction that feels fluid and polished.

## Engaging Hover Interaction

-   Smooth zoom on hover: Magnifies the image by a customizable scale factor for a dynamic reveal.
    
-   Cursor-based focal point: The zoom centers dynamically on the cursor’s position, creating a natural, immersive feel.
    
-   Fluid transitions: Powered by Framer Motion, the animation uses customizable easing and duration for seamless performance.
    
-   Responsive reset: On hover leave, the image elegantly returns to its original scale without abrupt movements.
    

## Full Customization Controls

ZoomImage includes property controls so you can easily tailor it to match your design:

-   Image support: Upload and display any image, with automatic responsive sizing.
    
-   Zoom scale: Choose how much the image magnifies (1.1× up to 5×).
    
-   Transition timing: Adjust duration and easing for a fast or smooth zoom experience.
    
-   Background color: Set a backdrop behind the image for contrast or framing.
    
-   Border radius: Add rounded corners (0–50px) for soft, modern styles.
    

## How It Works

The component uses Framer Motion for scaling animations and calculates the cursor’s position relative to the image to update the CSS transform-origin. This means the zoom feels centered on where the user hovers, giving a premium, interactive effect. The zoom smoothly transitions in and out, avoiding any jarring jumps.

## Perfect For Modern Web Experiences

**Use ZoomImage to:**

-   Showcase product details in e-commerce designs.
    
-   Create dynamic portfolio previews.
    
-   Add subtle interactivity to image galleries.
    
-   Highlight hero images or background visuals with engaging motion.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #1265

## Details

- **Author**: Jurre
- **Published**: 2025-07-29
- **Updated**: 2025-07-30
- **Added**: 2025-07-29
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background