Open menu

CSS Hover Effects

Browse more than 200 hover effects for cards, images, links, navigation menus and icon buttons, from lifts, glows and underlines to captions, fills and playful animations. Adjust the duration, easing, intensity and colors, then copy CSS, SCSS, Tailwind, HTML or React. Every effect also runs on keyboard focus, respects reduced-motion settings, and keeps revealed content visible on touch screens.

Preset gallery
Hover me

Hover or focus this card to see the effect.

Hovered

Hover the element or Tab to it: the effect runs on both. The small preview shows the hovered state.

Accessibility checks

  • Pass The effect also runs on :focus-visible, so keyboard users see the same feedback as mouse users.
  • Pass A prefers-reduced-motion block removes transitions and animations for people who ask for less motion. The hovered state still applies.
  • Pass 300 ms feels responsive. Hover feedback works best between 150 and 400 ms.
  • Pass Text on the surface has 17.7:1 contrast, which meets WCAG AA (4.5:1).

Export code

.hover-fx {
  position: relative;
  display: block;
  max-width: 320px;
  padding: 24px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 16px;
  background-color: #FFFFFF;
  color: #111827;
  text-decoration: none;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hover-fx .card-title {
  display: block;
  margin: 0 0 0.4em;
  font-size: 1.25rem;
}

.hover-fx p {
  margin: 0;
  color: inherit;
  opacity: 0.8;
}

.hover-fx:hover,
.hover-fx:focus-visible,
.hover-fx.is-hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(17, 24, 39, 0.18);
}

.hover-fx:focus-visible {
  outline: 2px solid #4F46E5;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .hover-fx,
  .hover-fx *,
  .hover-fx::before,
  .hover-fx::after,
  .hover-fx *::before,
  .hover-fx *::after {
    transition-duration: 0.01ms !important;
    animation: none !important;
  }
}
Favourites on this device (0)

No favourites yet.

Effect
Element
Timing
Colors & content

How to use the hover effects library

  1. Browse the gallery. Filter by cards, images, links, menus or icons. Each thumbnail shows the effect’s hovered state. Select Customize to load one.
  2. Try it. Hover the preview, or press Tab to focus it. The small “Hovered” preview next to it shows the end state for comparison.
  3. Tune the timing. Set the duration (150–400 ms feels responsive), the easing and the intensity, which scales distances, angles and glow sizes.
  4. Match your brand. Set the accent, second color, surface, text color and corner radius, then type your own label.
  5. Review the checks: keyboard parity, reduced motion, touch fallback, timing and contrast.
  6. Export CSS, CSS variables, SCSS, Tailwind, HTML or a React component.

How it works

Every effect follows the same pattern:

.hover-fx { transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1); }
.hover-fx:hover,
.hover-fx:focus-visible { transform: translateY(-6px); }
  • Resting styles set the starting point, such as an underline scaled to zero.
  • Hover and focus styles set the end point.
  • The transition moves between them, listing only the properties that change.

Effects such as wobble, bounce and marching dashes use keyframes that play while the element is hovered. Effects that draw lines, fills and overlays use ::before and ::after pseudo-elements, so you don’t need extra markup.

Performance

transform and opacity are the cheapest properties to animate, because the browser can move already-painted layers. Most effects here use them. Shadows, filters and clip-paths cost a little more per frame. That’s fine for single elements, but avoid them on hundreds of items at once.

Worked examples

Example 1: a product card

Choose Card · Lift, set the duration to 250 ms and the intensity to 0.75 for a subtle rise. Pair it with Title color on a second class if you also want the heading to change color.

Example 2: article links

Choose Link · Underline slide-through. The underline grows from the left on hover and leaves to the right when the pointer moves away, a small detail that makes links feel responsive.

Example 3: a portfolio grid

Choose Image · Caption slides up. On desktop the caption appears on hover or focus; on touch screens it stays visible, so visitors can always read it.

Common mistakes

  • Hover-only feedback. Always style :focus-visible too, and never remove the focus outline without replacing it.
  • Hiding essential information behind hover. If content matters, make sure touch and keyboard users can reach it.
  • Slow transitions. Anything over 500 ms makes the interface feel sluggish.
  • Layout-shifting effects. Changing width, margin or font-size on hover pushes neighbouring content around. Use transform instead.

Frequently asked questions

Why do the effects also run on keyboard focus?

People who navigate with a keyboard never hover. Applying the same styles on :focus-visible gives them the same feedback as mouse users, and the generated CSS also includes a clear focus outline. You can switch focus mirroring off, but the accessibility check will flag it.

What happens on phones and tablets?

Touch screens have no hover. Effects that reveal content, such as captions or hidden descriptions, add a (hover: none) block that shows the content all the time, so nothing is hidden from touch users. Purely decorative effects simply don't run.

Why does the CSS list specific properties in the transition?

The studio writes transitions only for the properties an effect changes, such as transform and box-shadow, instead of transition: all. This avoids animating properties you didn't intend to and keeps the browser's work to a minimum.

How does the Tailwind export work?

Effects that only style the element itself become Tailwind utilities with arbitrary properties and hover: and focus-visible: variants, so no config is needed. Effects that rely on pseudo-elements, child elements or keyframes are exported as a small component class inside @layer components.

How do "dim the others" menu effects work without JavaScript?

When the pointer is over the navigation, every link except the hovered one fades out. The selector is nav:hover a:not(:hover), which is pure CSS. Keyboard focus works the same way through :focus-within.

Will animated hover effects bother people sensitive to motion?

Every export includes a prefers-reduced-motion block that removes transitions and keyframe animations. Hovered styles such as colors and shadows still apply, just without movement.

Sources