Hover Words & Images
Hoverable words within your text that associate with animated images to create an interactive text element with full customizability.
Make it with Workshop
Build your own component with AI
Hoverable words within your text that associate with animated images to create an interactive text element with full customizability.
Make it with Workshop
Build your own component with AI
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.
