Reveal elements on hover

Use a hover interaction to reveal child elements when you hover over a parent element.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

Use a hover interaction to reveal elements on hover.

In this lesson:

  1. Build an animation to hover in
  2. Build an animation to hover out 
  3. Apply the animation to other elements

Build an animation to hover in

  1. Select your Link Block (to make it the trigger)
  2. In the Interactions panel, click the plus sign next to Element Trigger and choose Mouse Hover from the dropdown menu
  3. Under On Hover, choose Start an Animation from the Action menu
  4. Click the plus sign next to Time Animations
  5. Name it (e.g., Fly in)
  6. Select the element you’d like to animate (e.g., the Heart element)
  7. Click the plus sign next to Timed Actions and choose Move from the dropdown menu
  8. Under Move, give the x-axis a value (e.g., -100)
  9. Next to Timing, toggle the switch to Set as initial state
  10. Repeat steps 6 to 9 for other elements you’d like to animate 
  11. Interactions panel, (hit shift) and select the element(s) in the timeline
  12. Right-click to duplicate
  13. Under Move, change the x-axis back to its origin (0 pixels)
  14. Under Timing, change the Easing (e.g., to Ease Out)
  15. Reduce the Duration (e.g., to 0.2 seconds)

Build an animation to hover out 

  1. Click out of the animation you just built 
  2. In the Interactions panel under On Hover Out, choose Start an Animation from the Action menu
  3. Under Timed Animations, click the cog icon next to Fly in and choose Duplicate
  4. Activate Fly in 2
  5. Rename it (e.g., Fly out fabulously)
  6. Delete the duplicate animations (e.g., Heart and H3 Price) from the timeline 
  7. Select the remaining animations in the timeline
  8. Next to Timing, switch off Set as initial state
  9. Adjust Easing and Duration as before


Apply the animation to other elements

  1. Select any of the Timed Actions in the timeline 
  2. Next to Affect choose Class
  3. Click All elements with this class and choose Only children with this class
  4. Repeat 1-3 for both hover in and hover out

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top