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 bind a Collection List to display them.
- Style images with initial opacity 0% or display none, position them absolutely, and use hover interactions on each item to reveal the image with opacity or display changes, ensuring animations target only the hovered item.
To create a hover effect in Webflow where hovering over a number from a CMS-powered list reveals a related image, follow these steps using the Webflow CMS, Collection Lists, and interactions.
1. Prepare Your CMS Collection
- Ensure your CMS collection includes:
- A Number field (or Text field) for the number.
- An Image field where the image you'd like to reveal is stored.
2. Create a Collection List
- Drag a Collection List onto the canvas.
- Bind it to your CMS collection with the numbers and images.
- Inside each Collection Item:
- Add a Text block and connect it to the number.
- Add an Image element and bind it to the CMS image field.
- Set the image’s initial display to Display: None or Opacity: 0% using Initial State in the next step.
3. Style and Position the Image
- Place the image absolutely or fixed depending on your desired positioning.
- Common setups:
- Place the image relative to the parent Collection Item using Position: Absolute.
- Optionally, add a Wrapper div for better control of layout and hover zones.
4. Apply Hover Interaction
- Select the Collection Item or Text Block as the hover trigger.
- Go to Interactions (lightning symbol) → Element trigger → Mouse Hover.
- For the Hover In animation:
- Target the image inside the Collection Item.
- Change Display from None to Block (if applicable) or animate Opacity from 0% to 100%.
- Adjust Position or Scale if you want entrance effects.
- For the Hover Out animation:
- Reverse the above: Opacity to 0% or Display to None.
5. Use "Affect Only This Element" Option
- When adding animation steps, make sure to select “Only children with this class” or “Limit to nested elements” to ensure interactions apply only to the hovered item, not all items in the list.
6. Test the Hover Behavior
- Preview your site and hover over different numbers to verify that:
- The correct image appears for each number.
- Other images remain hidden.
- There is no flicker (tweak delay or opacity easing if needed).
Summary
To reveal a dynamically-loaded CMS image on hover over a number, use a Collection List, bind Text and Image, then create hover animations targeting the image inside each Collection Item. Be sure to restrict interactions to the current item to avoid affecting others.
