Enabling underline on specific text when hovering on an animated link block

Hey webflowers!

Im almost doing my head in on this one. :smiley:

I’m building my portfolio and I have these project sections…

I’ve created a Link block and put all content inside, in the link blocks hover state I’ve also made all the changes that should occur when one hovers on the link block. And it works great! Only thing I need to find a fix for is: I’ve added a thin underline that activates when one hovers on the whole block. But I need that underline to only show up on one of the three text sections. The other two should ignore the underline.

The Link block structure goes like this:

(It’s b-22 that should recive the underline, others ignore it)

The only way I’ve found to dodge the underline on hover for the two first text sections is by setting those sections to absolute, but this doesnt work well when responsive, the text moves to weird places depending on aspect ratio / resolution…

This is what it currently looks like on hover:

This is what I want it to look like:

Does anyone have any ideas of what might help?
I’ve been trying and trying now… Figured I should turn to this lovely community :smiley:

Warm regards,
Jon

Still have not found a solution… Any help would be massively helpfull… and rewarded with massive amounts of e-cookies 8) :smiley:

What I’d probably try is manually setting the other text elements to no underline, and leaving the third untouched. Then, on your parent-level element, set that to underlined text on hover. The third element should inherit its underline setting while the others should stay manually overridden.

Hey @Cricitem , thank you for your input! think I understand what you mean - but what I’m trying to do is to have the “Open presentation >” text become underlined when I hover on the whole link block - so in some way hovering on the link block needs to activate the underline.

Any ideas?

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.