How can I make individual divs show/hide on hover for each accreditation image in Webflow using legacy interactions?
TL;DR
- Wrap each image and corresponding content Div in a parent container and set the content Div to Display: None initially.
- Add a legacy hover interaction to each image that shows the associated content Div on hover (Display: Block), and hides it on hover out (Display: None), repeating this setup for each item individually since dynamic targeting isn't supported.
To show or hide a specific Div on hover of its associated image using legacy interactions in Webflow (pre-IX2), you'll need to set up a container structure and individual interactions for each item.
1. Set Up Your Structure
- Wrap each accreditation image and its associated Div (e.g., description or badge info) inside a parent Div Block.
- Example structure:
- Parent Div (e.g.,
accreditation-item)- Image (e.g.,
accreditation-image) - Content Div (e.g.,
hover-info) – set this to Display: None initially.
- Image (e.g.,
2. Add a Legacy Interaction
- Select the image inside the element group.
- Go to the Interactions (lightning bolt) panel, choose the "Legacy Interactions" tab (top of the panel).
- Click + Add Trigger > Hover.
3. Configure the Hover Interaction
- Choose "Affect Different Element(s)" if you're not directly acting on the image.
- Use a unique class selector or a combo class to target the correct hover-info Div (e.g.,
hover-infoinside theaccreditation-item).
For Hover In:
- Add Step > Display: Block
- Optionally follow with Opacity to 100% if fading is desired.
- Use Transform > Move or Scale if you want animation.
For Hover Out:
- Add Step > Display: None
- Optionally use Opacity to 0% before hiding to fade out.
4. Duplicate and Update for Each Item
- Unfortunately, legacy interactions do not support symbols or reusable interactions with dynamic targets.
- You'll need to duplicate the Parent Div, and then create a new interaction for each image-Div pair, ensuring each targets its specific child Div.
5. Manage Z-Index and Overflow
- Make sure the hover content Div (e.g.,
hover-info) is above other elements using Z-index. - If it's being cut off, check that the parent or any ancestor isn't set to Overflow: Hidden.
Summary
To show/hide individual accreditation info on hover using legacy interactions in Webflow, wrap each image and content Div in a container, set the content Div to Display: None by default, and use individual hover interactions for each image that show or hide their associated content Div. Each must be set up separately, as legacy interactions don’t support targeting nested elements dynamically.