---
title: "Image Hover — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Rohit Anand · Effects. Image Hover — Elastic Image Interaction Create a dynamic, elastic image effect for your Framer websites."
canonical: "https://framer.elliotli.dev/component/image-hover"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Image Hover

# Image Hover

Elastic Image Interaction Framer

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

![Image Hover preview image 1](https://framer.elliotli.dev/og/component/image-hover/8d25bc23c2ce785a/1600x1067.jpg)

## Summary

Image Hover — Elastic Image Interaction Create a dynamic, elastic image effect for your Framer websites.

## Description

## Image Hover — Elastic Image Interaction

Create a dynamic, elastic image effect for your Framer websites. **Image Hover** turns any image into a flexible WebGL surface that smoothly bends, stretches, and reacts to your cursor.

Live Preview: [https://elasticimage.framer.website/](https://elasticimage.framer.website/?editSite)

Gumroad Link: [https://rohitanand.gumroad.com/l/thfro?wanted=true](https://rohitanand.gumroad.com/l/thfro?wanted=true)

### Features

-   **Elastic Image Distortion** — Create smooth, organic image deformation.
    
-   **Hover & Drag Modes** — Choose between simple hover interaction or click-and-drag deformation.
    
-   **Custom Image** — Upload any image directly through Framer.
    
-   **Adjustable Physics** — Control stiffness, damping, pull strength, grab radius, and wobble.
    
-   **3D Tilt** — Add depth with adjustable surface tilt.
    
-   **Dynamic Shading** — Create a more dimensional, realistic surface.
    
-   **Grid Overlay** — Optional customizable grid with density, opacity, and color controls.
    
-   **Custom Colors** — Configure fallback gradient colors and highlights.
    
-   **Border Radius** — Easily match the component to your design.
    
-   **Responsive** — Automatically adapts to the size of the Framer frame.
    
-   **Touch Support** — Works with pointer and touch interactions.
    
-   **Performance Optimized** — WebGL rendering pauses when the component is outside the viewport.
    
-   **Static Renderer Support** — Uses a static image/gradient fallback during Framer static rendering and export.
    
-   **Reduced Motion Support** — Automatically respects the user's reduced-motion preference.
    

### Perfect For

Use it for **hero sections, portfolios, project showcases, galleries, product previews, creative landing pages, cards, and interactive image presentations**.

Drop it into your Framer project, upload an image, choose **Hover** or **Drag**, and customize the physics to create your own interaction.

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

-   All · #9661

## Details

- **Author**: Rohit Anand
- **Price**: $10.00
- **Published**: 2026-08-21
- **Updated**: 2026-08-21
- **Added**: 2026-08-21
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo