Fade Non-Active Elements

This simple CSS code snippet allows you to fade items that are not currently hovered on your Webflow site. This is perfect for navbars or other elements that you want to emphasize the hover state on without building unique hover states or using interactions.

How to add it

1. Add CSS code snippet to your closing head section or your global site embed
2. Update your class names to your own or utilize the pre-set class names

The code

                      <!-- Add to head tag -->
<style>
.MENU-CLASS:hover .MENU-ITEM-CLASS {
opacity: 0.4;
}
.MENU-CLASS .MENU-ITEM-CLASS:hover {
opacity: 1;
}
</style>