Sibling fade

OSCC · 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.
Preview
Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 
<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;
}

Would you like to help us improve 30 seconds of code?Take a quick survey

Recommended snippets

  • Hamburger Button

    CSS, Interactivity

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

  • Popout menu

    CSS, Interactivity

    Reveals an interactive popout menu on hover/focus.

  • Horizontal scroll snap

    CSS, Interactivity

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