---
title: "Hover Words & Images — Framer component · Best of Framer"
description: "$15.00 · Framer component · by Fernando • hippo design · Text. Create engaging, interactive storytelling with hoverable text-image connections."
canonical: "https://framer.elliotli.dev/component/hover-words-images"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Hover Words & Images

# Hover Words & Images

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

![Hover Words & Images preview image 1](https://framer.elliotli.dev/og/component/hover-words-images/bdd1b28e62200125/1600x1200.jpg)

## Summary

Create engaging, interactive storytelling with hoverable text-image connections.

## Description

**Create engaging, interactive storytelling with hoverable text-image connections.**

This component lets you transform static text into a dynamic, interactive element by associating specific words picked from the text with unique images. When people hover over a highlighted word, its linked image appears with smooth animations, perfect for enhancing brand storytelling, product showcases, portfolios, editorial content or whatever else you can imagine.

**Key Features:**

-   **Word-Level Linking:** Choose specific words in any text block to associate its image on hover.
    
-   **URL/Link is Optional:** The ability to use a link or not on a per-word-basis makes this component even more flexible and adaptable to many use-cases.
    
-   **Smooth Mouse-Linked Animation:** Comes with a customizable, tasteful interaction that makes the image follow your cursor as you hover over a word.
    
-   **Fully Customizable:** Style both text and image freely, typography, layout, hover styles, image size, positioning, timing.
    
-   **No-Code Needed:** Easily customize styles, transitions, map words to images and add your own content directly in the properties panel without writing a single line of code.
    
-   **Responsive Ready:** Works with Framer's native responsive controls: just add a breakpoint and adjust any properties you may need to.
    
-   **Accessible Out-of-the-box:** You have the option to pick the HTML tag to assign to your text element, making sure your site remains technically optimized for accessibility.
    
-   **Ready-to-use:** No matter if you're starting a new project or looking to spice-up a new one, just drop this component into it and watch it come alive.
    

Whether you're designing an editorial site, portfolio, e-commerce landing page, or experimental UX concept, this component gives you total creative control to build rich, immersive interactions between text and images.

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

-   All · #2973

## Details

- **Author**: Fernando • hippo design
- **Price**: $15.00
- **Published**: 2025-08-06
- **Updated**: 2025-08-06
- **Added**: 2025-08-01
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing