Navigation link hover effect

I’m looking to create a hover animation on my navbar. I want the hovered link to stay 100% opacity and the remaining links to then turn 50% opacity. Please can someone help me with the best solution for this matter?

Here is my public share link: https://preview.webflow.com/preview/website-agency-d1626f?utm_medium=preview_link&utm_source=designer&utm_content=website-agency-d1626f&preview=ccc9978e15343ce28b86dc73adae2728&mode=preview

Here is the low code version which works perfect but I’m sure this can be done natively on webflow need to experiment.

Read-Only

Published Link

You can found the code in the page settings hope it helps :peace_symbol:

Thanks @Sachin. Do you know whether this would be possible with just interactions? I only have the free version so I’m unable to add custom code to the page.

I will give it a try and get back :peace_symbol:

Thank you. I appreciate your help on this :pray:t3:

@Jordan.kellett

This is quite simple to accomplish using Webflow interactions. I made a quick demo on my sandbox site and recorded a video.

The important bits:
-Make sure your nav items have the same class
-Create a Mouse Hover interaction that is triggered off of the class instead of the element. This is really important as is it ensures you only make one set of on/off interactions but all nav items trigger the effect.
-Create your hover on opacity interaction, and change the affect option to class, then in the dropdown choose Only siblings with this class. That is relatively self explanatory, but for the sake of anyone who might not know; that means that it will only affect elements with the same class and the same parent element, but will not affect the interaction trigger.
-For the hover out part of the interaction, you can just duplicate the first one, rename it, and return the opacity to 100%

Video:
https://www.loom.com/share/3eb0eadd02f641b9b0262901dbf49fdf

2 Likes

Thanks @Andrew_Coderre the video tutorial worked like a charm!

1 Like

No problem @Jordan.kellett!