Fades out the siblings of a hovered item.
transition
to animate changes to opacity
.: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;
}
Would you like to help us improve 30 seconds of code?Take a quick survey
CSS, Interactivity
Displays a hamburger menu which transitions to a cross button on hover.
CSS, Interactivity
Reveals an interactive popout menu on hover/focus.
CSS, Interactivity
Creates a horizontally scrollable container that will snap on elements when scrolling.