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;
}

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.