How can I make a child element display when hovering over its parent container in Webflow?
TL;DR
- Nest the child element inside the parent and initially hide it using Display: None or Opacity: 0.
- Add a Mouse Hover interaction to the parent and animate the child to become visible (e.g., Display: Block or Opacity: 100%), then reverse the change on hover out.
To make a child element appear on hover of its parent in Webflow, you need to use a hover trigger on the parent and adjust the child's visibility or opacity. Here's how:
1. Set Up the Parent and Child Elements
- Place the child element inside the parent container in the Navigator panel.
- Style the child element with
Display: NoneorOpacity: 0initially so it’s hidden.
2. Add a Hover Interaction to the Parent
- Select the parent container in the Designer.
- Go to the Interactions panel (lightning icon).
- Click + next to Element Trigger and choose Mouse Hover.
- Choose On Hover to start the first animation.
3. Create the Hover Animation
- Click Start an Animation, then + New Timed Animation (e.g., "Show Child").
- Click + Add Action, select the child element from the Navigator (not the parent).
- Choose a style action like:
- Display: Block or Flex if the child was hidden with Display.
- Or Opacity: 100% if the child was hidden with Opacity.
- Optionally set a Transition Duration (e.g., 0.2s) and Easing.
4. Create the Hover Out Interaction
- In the same Mouse Hover trigger, choose On Hover Out.
- Start a new animation (e.g., "Hide Child").
- Select the child, and:
- Set Display: None or Opacity: 0%, depending on your first method.
- Add a Transition Duration to match the hover-in effect if desired.
5. Preview and Adjust
- Use the Preview mode to test hovering.
- Adjust animation durations, easing, or starting/ending styles as needed.
Summary
To show a child element on parent hover in Webflow, use a Mouse Hover interaction on the parent, and animate the child’s display or opacity. This keeps your structure clean and interaction behavior predictable.
