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.
hippo design
