Hover on link block to trigger text underline

Hi there,

Im trying to show an underline on a header when I’m hovering over a link block. The header is inside of this link block.

You can find the header on the ‘Team’ page and the screenshot you see the header selected that needs the underline animation.

Thank you for your time.


Here is my public share link: https://preview.webflow.com/preview/j-t?utm_medium=preview_link&utm_source=designer&utm_content=j-t&preview=0a4745fe9abe64183110cbc56b3dafbc&pageId=5ecad0e63931c04595151acf&mode=preview

Hey wouterjesse

For this hover animation I would wrap the HeadingPerson element in a div and set that div to relative. Then, add another div inside that parent div and give it a class of “underline”. Set underline to absolute positioning and set it to the full width of the bottom of the parent div. Then, have it scale from 0 to 1 on the hover animation. Here is a video to help explain what I’m talking about

Hope that helps!

2 Likes

Thank you for the solution!

And @pnw-paul do you maybe also have a solution to make the image zoom in with the exact dimensions when I hover over the ‘TabpanPersonWrapper’?