Sibling fade

CSS, Interactivity · Dec 30, 2020

Fades out the siblings of a hovered item.

  • Use a transition to animate changes to opacity.
  • Use the :hover and :not pseudo-class selectors to change the opacity of all elements except for the one the mouse is over to 0.5.
<div class="sibling-fade">
  <span>Item 1</span> <span>Item 2</span> <span>Item 3</span>
  <span>Item 4</span> <span>Item 5</span> <span>Item 6</span>
</div>
span {
  padding: 0 16px;
  transition: opacity 0.3s;
}

.sibling-fade:hover span:not(:hover) {
  opacity: 0.5;
}

More like this

  • Hamburger Button

    Displays a hamburger menu which transitions to a cross button on hover.

    CSS, Interactivity · Dec 30, 2020

  • Popout menu

    Reveals an interactive popout menu on hover/focus.

    CSS, Interactivity · Dec 30, 2020

  • Horizontal scroll snap

    Creates a horizontally scrollable container that will snap on elements when scrolling.

    CSS, Interactivity · Oct 11, 2021