Hover.css

A collection of CSS powered hover effects for links, buttons, logos, SVG, and featured images. Built with CSS Custom Properties, native nesting, and @layer — no preprocessor required.

Quick Start

1. Install

npm install @theogony/hover.css

2. Include the CSS

Using a bundler (Vite, webpack, etc.):

@import "@theogony/hover.css/css/hover.css";

Or link directly in HTML:

<link rel="stylesheet" href="path/to/hover.css">

3. Add a class to your element

<a href="#" class="hvr-grow">Grow</a>

That's it! Hover over the element to see the effect.

Customizing with CSS Custom Properties

All design tokens are defined as CSS Custom Properties on :root. Override them to match your project:

:root {
  /* Durations */
  --hvr-fast-duration: 0.1s;
  --hvr-medium-duration: 0.3s;
  --hvr-slow-duration: 0.5s;

  /* Colors */
  --hvr-primary-color: #e1e1e1;
  --hvr-secondary-color: #666;
  --hvr-highlight-color: #ccc;
  --hvr-active-color: #2098D1;
  --hvr-shadow-color: rgba(0, 0, 0, 0.6);

  /* Speech bubble tips */
  --hvr-tip-width: 10px;
  --hvr-tip-height: 10px;
  --hvr-tip-color: var(--hvr-primary-color);

  /* Curl settings */
  --hvr-curl-width: 25px;
  --hvr-curl-height: 25px;
}

Example — changing the primary color to red:

:root {
  --hvr-primary-color: #e74c3c;
}

All Effects (111 total)

2D Transitions (29)

| Class | Effect | |-------|--------| | hvr-grow | Grow | | hvr-shrink | Shrink | | hvr-pulse | Pulse | | hvr-pulse-grow | Pulse Grow | | hvr-pulse-shrink | Pulse Shrink | | hvr-push | Push | | hvr-pop | Pop | | hvr-bounce-in | Bounce In | | hvr-bounce-out | Bounce Out | | hvr-rotate | Rotate | | hvr-grow-rotate | Grow Rotate | | hvr-float | Float | | hvr-sink | Sink | | hvr-bob | Bob | | hvr-hang | Hang | | hvr-skew | Skew | | hvr-skew-forward | Skew Forward | | hvr-skew-backward | Skew Backward | | hvr-wobble-horizontal | Wobble Horizontal | | hvr-wobble-vertical | Wobble Vertical | | hvr-wobble-to-bottom-right | Wobble To Bottom Right | | hvr-wobble-to-top-right | Wobble To Top Right | | hvr-wobble-top | Wobble Top | | hvr-wobble-bottom | Wobble Bottom | | hvr-wobble-skew | Wobble Skew | | hvr-buzz | Buzz | | hvr-buzz-out | Buzz Out | | hvr-forward | Forward | | hvr-backward | Backward |

Background Transitions (18)

| Class | Effect | |-------|--------| | hvr-fade | Fade | | hvr-back-pulse | Back Pulse | | hvr-sweep-to-right | Sweep To Right | | hvr-sweep-to-left | Sweep To Left | | hvr-sweep-to-bottom | Sweep To Bottom | | hvr-sweep-to-top | Sweep To Top | | hvr-bounce-to-right | Bounce To Right | | hvr-bounce-to-left | Bounce To Left | | hvr-bounce-to-bottom | Bounce To Bottom | | hvr-bounce-to-top | Bounce To Top | | hvr-radial-out | Radial Out | | hvr-radial-in | Radial In | | hvr-rectangle-in | Rectangle In | | hvr-rectangle-out | Rectangle Out | | hvr-shutter-in-horizontal | Shutter In Horizontal | | hvr-shutter-out-horizontal | Shutter Out Horizontal | | hvr-shutter-in-vertical | Shutter In Vertical | | hvr-shutter-out-vertical | Shutter Out Vertical |

Icons (27)

Icon effects work with any element that has the .hvr-icon class inside the effect element. Use inline SVG for best results:

<a href="#" class="hvr-icon-forward">
  Next
  <svg class="hvr-icon" viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor">
    <path d="M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z"/>
  </svg>
</a>

| Class | Effect | |-------|--------| | hvr-icon-back | Icon Back | | hvr-icon-forward | Icon Forward | | hvr-icon-down | Icon Down | | hvr-icon-up | Icon Up | | hvr-icon-spin | Icon Spin | | hvr-icon-drop | Icon Drop | | hvr-icon-fade | Icon Fade | | hvr-icon-float-away | Icon Float Away | | hvr-icon-sink-away | Icon Sink Away | | hvr-icon-grow | Icon Grow | | hvr-icon-shrink | Icon Shrink | | hvr-icon-pulse | Icon Pulse | | hvr-icon-pulse-grow | Icon Pulse Grow | | hvr-icon-pulse-shrink | Icon Pulse Shrink | | hvr-icon-push | Icon Push | | hvr-icon-pop | Icon Pop | | hvr-icon-bounce | Icon Bounce | | hvr-icon-rotate | Icon Rotate | | hvr-icon-grow-rotate | Icon Grow Rotate | | hvr-icon-float | Icon Float | | hvr-icon-sink | Icon Sink | | hvr-icon-bob | Icon Bob | | hvr-icon-hang | Icon Hang | | hvr-icon-wobble-horizontal | Icon Wobble Horizontal | | hvr-icon-wobble-vertical | Icon Wobble Vertical | | hvr-icon-buzz | Icon Buzz | | hvr-icon-buzz-out | Icon Buzz Out |

Border Transitions (17)

| Class | Effect | |-------|--------| | hvr-border-fade | Border Fade | | hvr-hollow | Hollow | | hvr-trim | Trim | | hvr-ripple-out | Ripple Out | | hvr-ripple-in | Ripple In | | hvr-outline-out | Outline Out | | hvr-outline-in | Outline In | | hvr-round-corners | Round Corners | | hvr-underline-from-left | Underline From Left | | hvr-underline-from-center | Underline From Center | | hvr-underline-from-right | Underline From Right | | hvr-reveal | Reveal | | hvr-underline-reveal | Underline Reveal | | hvr-overline-reveal | Overline Reveal | | hvr-overline-from-left | Overline From Left | | hvr-overline-from-center | Overline From Center | | hvr-overline-from-right | Overline From Right |

Shadow and Glow (7)

| Class | Effect | |-------|--------| | hvr-shadow | Shadow | | hvr-grow-shadow | Grow Shadow | | hvr-float-shadow | Float Shadow | | hvr-glow | Glow | | hvr-shadow-radial | Shadow Radial | | hvr-box-shadow-outset | Box Shadow Outset | | hvr-box-shadow-inset | Box Shadow Inset |

Speech Bubbles (8)

| Class | Effect | |-------|--------| | hvr-bubble-top | Bubble Top | | hvr-bubble-right | Bubble Right | | hvr-bubble-bottom | Bubble Bottom | | hvr-bubble-left | Bubble Left | | hvr-bubble-float-top | Bubble Float Top | | hvr-bubble-float-right | Bubble Float Right | | hvr-bubble-float-bottom | Bubble Float Bottom | | hvr-bubble-float-left | Bubble Float Left |

Curls (4)

| Class | Effect | |-------|--------| | hvr-curl-top-left | Curl Top Left | | hvr-curl-top-right | Curl Top Right | | hvr-curl-bottom-right | Curl Bottom Right | | hvr-curl-bottom-left | Curl Bottom Left |

Individual Effect Import

Each effect is a standalone CSS file. Import only what you need:

/* Import just one effect */
@import "@theogony/hover.css/css/effects/2d-transitions/grow.css";

Or link directly in HTML:

<link href="css/effects/2d-transitions/grow.css" rel="stylesheet">

Accessibility

Hover.css respects prefers-reduced-motion. When the user has requested reduced motion, all animations and transitions are effectively disabled:

@media (prefers-reduced-motion: reduce) {
  [class^="hvr-"] {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Browser Compatibility

Hover.css uses modern CSS features that require recent browsers:

| Browser | Minimum Version | |---------|----------------| | Chrome | 112+ | | Firefox | 117+ | | Safari | 16.5+ | | Edge | 112+ |

Key features used:

• CSS Custom Properties (var())
• CSS native nesting
• @layer cascade layers
• CSS clip-path
• backdrop-filter (curls)

Modern CSS Features

| Feature | Original | Current | |---------|------|-------------------| | Preprocessor | Required (Sass/LESS) | Not required — plain CSS | | Customization | Sass variables | CSS Custom Properties | | Cascade control | None | @layer for predictable specificity | | Nesting | Sass nesting | Native CSS nesting | | Icon support | FontAwesome dependency | Inline SVG (no dependencies) | | IE support | IE 10+ with prefixes | Modern browsers only (no prefixes) | | Bundle size | Single compiled file | Modular — import what you need | | Reduced motion | Not handled | Built-in prefers-reduced-motion |

Building

Install dependencies and build the minified bundle:

npm install
npm run build

This produces css/hover.min.css using Lightning CSS.

Demo

Open demo/index.html in a modern browser to see all 111 effects in action.

License

Hover.css is available under the Apache License 2.0.

Credits

Based on Hover.css by Ian Lunn.

Maintained by the community on GitHub.