Hover Words & Images

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.