We recently made some changes to our site, but there’s a navigation effect we’re fond of that stuck around.

When you hover over a link on larger screens, all the adjacent links fade to a lower opacity:

A cursor hovers over each link in our site’s menu. As soon as the cursor enters, all links except the one being hovered fade out just a little.

We didn’t invent this effect (it’s a vintage CSS trick), but we’re asked about it often enough that I thought I’d share how it works.

Here’s the relevant CSS:

.nav:hover .nav-item:not(:hover) { opacity: 0.65;} The selector does the heavy lifting here: When any part of the navigation is hovered, we lower the opacity of any navigation items that aren’t being hovered.

That’s really all there is to it! CSS is so great.