v6.0.0-beta.5
  • Home
  • Tokens
  • Layout
  • Utilities
    • Click Area
    • Container
    • Counted
    • Dimensions
    • Hover Group
    • Indexed
    • Margin
    • No Print
    • Typography
    • Visually Hidden
    • Z-Index
  • Guides
  • home
  • /
  • utilities
  • /
  • Hover Group
Source

Hover Group

The Hover Group utility 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 any class containing "hover-group" to a parent container, and the utility will automatically create hover interactions between its direct children. The effects only activate on devices that support hover to ensure proper touch device compatibility.

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

<div class="hover-group-grow">
  <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 the specified opacity, while the hovered element can optionally scale up for additional emphasis.

Custom Properties

Property Default Description
--hover-opacity 0.4 Opacity for non-hovered siblings
--hover-grow 1 Scale factor for hovered elements (1 = no scaling)

Class Patterns

Pattern Description
[class*="hover-group"] Base hover group functionality with fade effects
.hover-group-grow Preset that includes moderate growth effect (scale: 1.175)
← utilities: Dimensions utilities: Indexed →
© Crinkles.
Powered by: 11ty & Feo.css | Github