How can I create a hover effect in Webflow using dynamic content from the CMS to reveal an image when a user hovers over a number in a text list?
TL;DR
- Bind number and image fields in a Collection List, placing the image in an absolutely positioned div with 0% opacity.
- Add hover interactions to the number to fade in the sibling image and fade it out on hover out, ensuring interactions affect only elements within each Collection Item.
To show an image on hover based on dynamic CMS content, such as revealing a CMS-linked image when the user hovers over a number in a list, follow these steps using Webflow interactions and Collection Lists.
1. Structure Your CMS Collection
- In your CMS Collection, ensure each item has:
- A Number field (e.g., "List Number").
- An Image field (e.g., "Hover Image").
2. Design the Collection List Layout
- Drag a Collection List onto your page and connect it to your desired CMS Collection.
- Inside the Collection Item:
- Place a Text element (e.g., H1 or Paragraph) and bind it to your number field.
- Add a Div block to hold the image. Inside it, place an Image element and bind it to your image field.
- Give this image-holding Div a class like “Hover Image Wrapper” and style it as follows:
- Position: Absolute (relative to the Collection Item).
- Initial Opacity: 0%
- Z-index: High enough to appear above other content.
3. Create The Hover Interaction
- Select the Text element (the number).
- In the Interactions panel, create a Mouse Hover interaction.
- Under the On Hover trigger:
- Add a Show action for the Sibling Hover Image Wrapper, setting:
- Opacity to 100%
- Display to Block or Flex (if hidden)
- Set a smooth transition duration.
- Under the On Hover Out trigger:
- Return the image’s Opacity to 0%
- Optionally change Display to None or Hidden
4. Use “Affect Only” Settings
- When targeting the image wrapper, check “Affect Only Children/Siblings of This Element” to ensure interactions are scoped per Collection Item, not applied globally.
- This ensures that hovering over one number only affects its paired image.
5. Test Responsiveness and Positioning
- Double-check that the image position aligns correctly with the number on hover.
- Use margin, padding, or transforms to control where the image appears in relation to the number.
Summary
To create a CMS-powered hover effect that reveals an image when hovering over a number, bind both number and image in a Collection List, use absolute positioning for the image container, and apply hover interactions scoped to siblings or children. This allows for dynamic, CMS-driven visuals triggered by user interaction.