A Pure CSS Gallery Focus Effect with :not

Previously, styling all elements within a container except the hovered one often involved JavaScript. This typically meant adding or removing classes on mouseenter and mouseleave events. While functional, a pure CSS solution is often preferable. This article details a CSS-only approach, initially inspired by techniques used in recreating animations like the Netflix homepage. However, a previous attempt using this method failed on a grid-based layout due to gaps between elements. This article presents a solution that elegantly handles these gaps.

Markup and Base CSS

The foundational HTML utilizes a grid-based list:

• .grid: The container grid.
• .grid__child: Individual grid items.

The markup is as follows:

The initial CSS styles the grid and its children:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 15rem);
  grid-gap: 1rem;
}

.grid__child {
  background: rgba(0, 0, 0, .1);
  border-radius: .5rem;
  aspect-ratio: 1/1;
}

This creates a three-column grid (adjusting dynamically based on screen size) with a gap between items.

Leveraging CSS Selectors

The core interaction involves two steps:

1. Hovering the container affects all children.
2. The hovered child itself is excluded.

First, we target all children when the container is hovered:

.grid:hover .grid__child {
  /* ... */
}

Next, we exclude the currently hovered child using :not(:hover) to reduce opacity:

.grid:hover .grid__child:not(:hover) {
  opacity: 0.3;
}

This works perfectly without gaps between elements. However, with gaps, the effect triggers even when the cursor is over the gap itself.

Addressing Gaps

The solution lies in controlling pointer events. By setting pointer-events: none on the .grid container and pointer-events: auto on its children, we ensure the hover effect only triggers when directly over a child element, effectively ignoring the gaps.

.grid {
  /* ... */
  pointer-events: none;
}

.grid__child {
  /* ... */
  pointer-events: auto;
}

Adding a transition for smoother opacity changes completes the effect.

The final CSS incorporating this solution is:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 15rem);
  grid-gap: 3rem;
  pointer-events: none;
}

.grid:hover .grid__child:not(:hover) {
  opacity: 0.3;
}

.grid__child {
  background: rgba(0, 0, 0, .1);
  border-radius: .5rem;
  aspect-ratio: 1/1;
  pointer-events: auto;
  transition: opacity 300ms;
}

Potential Limitations

While effective, this approach might require adjustments for scrollable containers (e.g., horizontal sliders). In such cases, wrapping the .grid in another container can be a workaround.

Conclusion

This demonstrates a powerful pure CSS solution for a common interaction challenge. By leveraging advanced CSS selectors and pointer event control, we achieve a sophisticated effect without resorting to JavaScript, leading to cleaner, more maintainable code. This highlights the increasing capabilities of CSS and encourages exploring native solutions before adding JavaScript complexity.

The above is the detailed content of A Pure CSS Gallery Focus Effect with :not. For more information, please follow other related articles on the PHP Chinese website!