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
- Create a CMS Collection with number and image fields, then add a Collection List bound to it.
- Inside each Collection Item, add a number text and hidden image, then apply hover interactions to reveal the image only within the hovered item.
To reveal an image on hover over a dynamic CMS-driven number list in Webflow, you'll use Collection Lists, interactions, and conditional visibility. Here's how to do it.
1. Set Up Your CMS Collection
- Create a CMS Collection (e.g., called Numbers) with:
- Number field (e.g.,
Item Number) - Image field (e.g.,
Hover Image) - Any other relevant fields
2. Add a Collection List to the Page
- Drag a Collection List onto your page and bind it to the Numbers Collection.
- Inside the Collection Item, add:
- Text Block for the number (e.g.,
Item Number) - Image Element for the hidden image (bound to your CMS
Hover Image)
3. Style and Structure Elements
- Set the image element to be hidden initially:
- Select the image, go to the Style Panel, and set it to Display: None.
- Alternatively, set Opacity: 0, Position: Absolute, and place it relative to your text block or List Item for positioning.
4. Add a Hover Interaction
- Select the Collection Item container (not just the number).
- Go to Interactions Panel > Element Trigger > Mouse Hover.
- On Hover In:
- Affect: Nested image element (not classes globally).
- Change the image’s Display to Block/Flex/Grid or Opacity to 100% with a smooth transition.
- On Hover Out:
- Reverse the interaction:
- Set Display to None or Opacity to 0%.
Important: To make it fully dynamic, ensure each image is targeted as a child of the hovered list item—do not apply the interaction globally.
5. Optional: Add Smooth Transitions
- If using opacity instead of display toggling:
- Add a transition effect via the Style panel (e.g., Opacity: 300ms Ease).
- This provides a smoother reveal on hover.
Summary
To create a CMS-driven image reveal on hover, bind your number list and image from the CMS, place them in a Collection List, and use element-specific hover interactions to toggle image visibility.