Hovers

Overview

The hover system provides a consistent “lift” interaction for cards, links, and button-cards: smooth scale + shadow, a color overlay fade, and synchronized text / heading / icon color shifts. Themes only change tokens (colors); the behavior and timing remain consistent.

Samples

Parent mode

Use on an element

Add exactly one hover-* class to the interactive element (usually an <a> card). Use this when you want to control hover behavior per card or per link.

Example (icon card link)

<a href="images.html" class="btn card-lifted hover-dark flex-v middle">
  <i class="icon icon--arrow-right item-t-r" aria-hidden="true"></i>
  <h6>Ratio Calc</h6>
  <i class="fs-lg icon icon--images" aria-hidden="true"></i>
</a>

Example (content card link)

<a href="#" class="card-lifted btn-card in-dwn-sm hover-dark">
  <h4>Student Leadership and Success Studies</h4>
  <p>Promotes holistic student development and advances students...</p>
  <i class="fa-solid fa-arrow-up-right" aria-hidden="true"></i>
</a>

Use on a parent (auto-apply)

Add a child-hover-* class to a parent container. Every direct child becomes hoverable automatically. Use this for grids/lists where every item should behave the same.

Example

<div class="grid grid-cols-1 md:grid-cols-2 gap-md child-hover-dark">

  <a href="#" class="card-lifted btn-card in-dwn-sm">
    <h4>Card 1</h4>
    <p>This card hovers because it is a direct child.</p>
    <i class="fa-solid fa-arrow-up-right" aria-hidden="true"></i>
  </a>

  <a href="#" class="card-lifted btn-card in-dwn-sm no-hover">
    <h4>Opt-out</h4>
    <p>This card does not hover because it has .no-hover.</p>
    <i class="fa-solid fa-arrow-up-right" aria-hidden="true"></i>
  </a>

</div>

Theme options

Theme classes only set tokens. Behavior and timing remain identical.

Theme tokens

Themes customize hover by setting tokens (CSS variables). Use these consistently so all themes behave the same.

Create a theme

Add a new theme by defining token values. Keep the theme token set consistent. Always create both an element theme and a parent theme.

/* Theme tokens only (behavior stays identical) */
.hover-sunrise,
.child-hover-sunrise{
  --hover-bg:       var(--color-valley-green);
  --hover-headline: var(--color-white);
  --hover-text:     var(--color-white);
  --hover-scale:    1.05;
  --hover-shadow-lift: var(--shadow-md);
}

Using with .anim

The animation system uses transform, and hover also uses transform. If both are on the same element, hover scale can break unless the Compatibilityibility rules are present.

Compatibility rules

/* HOVER + ANIM Compatibility PATCH */
:where([class^="hover-"], [class*=" hover-"]).anim,
:where([class^="child-hover-"], [class*=" child-hover-"]) > *:not(.no-hover).anim{
  transition-property: opacity, filter !important;
}

:where([class^="hover-"], [class*=" hover-"]).anim{
  transform: scale(1) !important;
}
:where([class^="child-hover-"], [class*=" child-hover-"]) > *:not(.no-hover).anim{
  transform: scale(1) !important;
}

:where([class^="hover-"], [class*=" hover-"]).anim:is(:hover, :focus-visible, :focus-within){
  transform: scale(var(--hover-scale)) !important;
}
:where([class^="child-hover-"], [class*=" child-hover-"]) > *:not(.no-hover).anim:is(:hover, :focus-visible, :focus-within){
  transform: scale(var(--hover-scale)) !important;
}

Accessibility + motion

Avoid