Dim All Non-Hovered Elements

Here is an interesting use of the newer :has() CSS pseudo-class.

All the elements in the example below will dim except for the element being hovered over.

This of course only works on desktop...or rather any screen/device where the :hover pseudo-class is available.

The Code

The basic code example would be as follows:

<ul>
  <li />
  <!-- <li /> repeated 9 times -->
</ul>

ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

li {
  aspect-ratio: 1 / 1;
  cursor: pointer;
  background-color: #06b6d4;
  transition: opacity 150ms ease;
}

li:has(~ li:hover),
li:hover ~ li {
  opacity: 0.5;
}

Using Tailwind

Here is exactly how I made the example using React and Tailwind:

<div className="mx-auto w-[min(32rem,100%)]">
  <ul className="grid grid-cols-3 gap-[min(2rem,4vw)]">
    {Array.from({ length: 9 }).map((_, i) => (
      <li
        key={i}
        className="peer aspect-square cursor-pointer bg-cyan-500 transition-opacity peer-hover:opacity-50 [&:has(~_li:hover)]:opacity-50"
      />
    ))}
  </ul>
</div>

Last Updated:

February 7, 2023