How can I make individual divs show/hide on hover for each accreditation image in Webflow using legacy interactions?
TL;DR
- Wrap each accreditation image and its tooltip div inside a unique parent container.
- Use combo classes or unique classes for each tooltip to ensure individual control.
- Apply legacy hover interactions to the parent container to show the tooltip on hover in and hide it on hover out, affecting only its child elements.
To reveal a specific div when hovering over a corresponding accreditation image, using legacy interactions in Webflow (not the newer Interactions system), follow these steps:
1. Prepare Your Elements in Webflow
- Wrap each accreditation image and its related div inside a single parent div (e.g.,
Accreditation-Item). - Inside each
Accreditation-Item, include: - The image block (e.g.,
Accreditation-Image). - The div to show/hide (e.g.,
Accreditation-Tooltip). - Set the visibility of the
Accreditation-Tooltipdiv to display: none initially in the Style panel.
2. Assign Unique Classes or Combo Classes
- If you’re not using unique instances with combo classes, Webflow legacy interactions will affect all elements with the same class.
- To avoid this, use combo classes (e.g.,
Accreditation-Tooltip item-1,Accreditation-Tooltip item-2, etc.) or give eachAccreditation-Itema unique class.
3. Create a Legacy Interaction on Hover
- Go to the Interactions (⚡Lightning icon) panel.
- Choose “Add Interaction” and select “Hover”.
- From the “Trigger” dropdown, choose the
Accreditation-Itemwrapper or image. - Create two states:
- Hover Over:
- Affect only elements inside this element.
- Choose the Tooltip div (e.g.,
Accreditation-Tooltip). - Add a Show / Hide action: set it to Display: Block or Opacity: 100%.
- Hover Out:
- Reverse the action: Display: None or Opacity: 0%.
4. Repeat for Each Item
- Because Webflow legacy interactions don't support targeting individual children dynamically, you need to create a separate interaction for each accreditation item if you're not using nested classes with combo class variations.
Summary
Use legacy hover interactions on individual parent containers to toggle visibility of the associated tooltip or div. Wrap elements properly, use combo classes or unique wrappers, and ensure you're applying interactions to affect only elements inside their respective parents.