Hover Effects

Use hover utilities to add polished interaction states without writing custom CSS. FrontAlign hover classes cover color changes, elevation, movement, rotation, image filters, and opacity changes with the same utility-first naming style used across the framework.

Hover utilities are pure CSS and do not require the FrontAlign runtime.

Quick reference

Usage

Apply hover classes directly beside the base utility classes. The base class defines the normal state, and the hover: class defines the interactive state.

<button className="button transition bg-primary hover:bg-dark text-white hover:text-light">Hover Me</button>

<div className="p-4 bg-slate-100 transition transform hover:translate-y-2">
  Premium feature card
</div>

<img src="/project.jpg" class="hover:scale-105 hover:brightness-110" alt="Project" />

Hover background colors

Use background hover utilities for buttons, cards, menu items, banners, and clickable surfaces.

<button class="bg-primary hover:bg-dark text-white">
  Primary Button
</button>

<button class="bg-light hover:bg-primary">
  Interactive Card
</button>

Hover palette colors

Use palette-based hover backgrounds when you need direct color families instead of semantic tokens.

<div class="hover:bg-blue">Blue hover</div>
<div class="hover:bg-green">Green hover</div>
<div class="hover:bg-red">Red hover</div>
<div class="hover:bg-purple">Purple hover</div>
<div class="hover:bg-orange">Orange hover</div>
<div class="hover:bg-yellow">Yellow hover</div>
<div class="hover:bg-teal">Teal hover</div>
<div class="hover:bg-indigo">Indigo hover</div>
<div class="hover:bg-slate">Slate hover</div>

Hover text colors

Use text hover utilities for links, icons, badges, nav items, and compact actions.

<a href="#" class="link text-body hover:text-primary">
  Read More
</a>

<a href="#" class="link text-dark hover:text-danger">
  Remove item
</a>

Hover shadows

Use hover shadows to add elevation when an element receives interaction.

<div class="bg-slate-100 rounded-3 transition-shadow hover:shadow-large">
  Card Content
</div>

Hover scale

Use scale utilities to make elements feel clickable. Small values like hover:scale-105 are usually the most professional for production interfaces.

<div class="transition-transform hover:scale-105 my-4 transform hover:scale-105">
  Hover Card
</div>

Hover translate Y

Use vertical translation to create floating cards and polished lift effects.

<div class="translate-transform transform hover:translate-y-2">
  Interactive Card
</div>

Hover translate X

Use horizontal translation for arrows, links, list items, and slide-style interactions.

<div class="transition-transform transform hover:translate-x-2">
  Slide Interaction
</div>

Hover rotation

Use rotation for expressive interfaces. For business UI, keep values small and intentional.

<div class="w-24 h-24 transition-transform transform hover:rotate-3">
  Badge
</div>

Hover brightness

Use brightness hover utilities for images, thumbnails, hero media, and gallery previews.

<img src="/hero.jpg" class="transition hover:brightness-110" alt="Hero" />

Hover grayscale

Use grayscale utilities for image reveal effects and editorial card layouts.

<img src="/team.jpg" class="transition hover:grayscale" alt="Team" />

<img src="/member.jpg" class="transition hover:grayscale-none" alt="Team Member" />

Hover opacity

Use opacity utilities for overlays, secondary actions, icons, and soft hover states.

<div class="transition-opacity hover:opacity-75">
  Content
</div>

Real-world examples

Premium card

Combine shadow and vertical movement for a polished card interaction.

<div class="transotion-all border rounded-4 hover:shadow-large hover:translate-y-2">
  Premium Feature Card
</div>

Interactive CTA

Combine background, text, and shadow utilities for a strong call-to-action state.

<a href="#" class="transition bg-primary hover:bg-dark text-white hover:text-white hover:shadow-medium">
  Get Started
</a>

Portfolio image

Combine scale and brightness for media previews, project grids, and gallery cards.

<img src="/project.jpg" class="transition hover:scale-105 hover:brightness-110" alt="Project" />

Team member card

Use grayscale utilities when the normal state is muted and the hover state should reveal the full image.

<img src="/member.jpg" class="transition grayscale hover:grayscale-none" alt="Team Member" />

Usage notes

• Use subtle hover effects for professional interfaces.
• Combine shadow and negative translate effects for premium floating cards.
• Combine scale and brightness for image galleries, portfolios, and product grids.
• Use hover text and background colors for links, buttons, nav items, and CTAs.
• Avoid excessive rotation in business interfaces unless the brand language is playful.
• Prefer small transform values for smooth and controlled interactions.
• Keep hover states meaningful; they should communicate interactivity, not only decoration.