Hover Group

The Hover Group component creates interactive hover effects where non-hovered siblings fade out and hovered elements can optionally scale up. This creates a focus effect that draws attention to the hovered item while de-emphasizing others, commonly used in image galleries, card grids, or navigation menus.

Usage

Apply the .hover-group class to a parent container, and it will automatically create hover interactions between its direct children. The effects only activate on devices that support hover to ensure proper touch device compatibility. Set --hover-grow above 1 to also scale the hovered child up.

<div class="hover-group">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<div class="hover-group" style="--hover-grow: 1.175">
  <img src="image1.jpg" alt="Image 1" />
  <img src="image2.jpg" alt="Image 2" />
  <img src="image3.jpg" alt="Image 3" />
</div>

When a user hovers over one child element, all other siblings will fade to --hover-opacity, while the hovered element scales up by --hover-grow for additional emphasis.

Custom Properties