Streaming live at 10am (PST)

How to Create This Nav Link Hover Effect?


#1

I am trying to create a hover effect for my nav links like the one with the red background here:

https://tympanus.net/Development/CreativeLinkEffects/#cl-effect-5

I got pretty far but I am having an issue where if you hover just above the word, the interactions spazz out.

services

http://practical-informatics.webflow.io/

Also I have only applied the interactions to “Services.”


Here is my public share link: https://preview.webflow.com/preview/practical-informatics?preview=f349b03887a6b26ebf707b3777e580da


#2

So, how I would pull off this effect would be to create a div with overflow: hidden and have both links in the div. You then set the interaction on the div wrapper to affect only the nested elements, and have both move up 100% on hover and move back to origin on hover out.

31 AM

18 AM

Hover Effect


#3

@bbrazis Thank you for the response! If I set them BOTH to move up 100%, wouldn’t that just move them both out of view? Is there an initial appearance for one or the other or any settings on the link-btn-1 or -2 that I need to think about? Haven’t gotten it quite right yet.

Updated preview: https://preview.webflow.com/preview/practical-informatics?preview=bcd63d8f34c03765a8100bd90f1d30a0


#4

on the link-wrapper try setting position:relative and making sure that both links are stacked on top of each other in the link-wrapper. Once they are stacked properly then you will see the desired effect, I hope. Also, try setting both links to have a width and height of 100%.

11 AM


#5

I’m definitely getting closer but for some reason mine stack and extend the nav bar below:

32 PM

I updated my link with the new code.


#6

set the link-wrapper's height to 60px and it should look good.


#7

Yes! You’re a genius, thank you for your help! This has been solved.


#8

Glad I could help you create this effect!


#9

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