Lifts, glows, shine sweeps, underline slides and 3D tilts — hover any card below to see the effect, then copy the CSS.
No animations match your search in this category.
Every effect above, with the markup to use and the complete CSS. Each one is self-contained: paste the CSS once, add the class, done.
The standard card hover in modern SaaS design: rise slightly, cast a deeper shadow. Transition both properties together.
Markup
<div class="card fh-hover-lift">Card content</div>CSS
.fh-hover-lift {
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fh-hover-lift:hover {
transform: translateY(-6px);
box-shadow: 0 14px 28px -10px rgba(0, 0, 0, 0.45);
}The springy cubic-bezier overshoots slightly, which reads as eager rather than mechanical.
Markup
<button class="fh-hover-grow">Click me</button>CSS
.fh-hover-grow {
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fh-hover-grow:hover {
transform: scale(1.08);
}A soft neon halo for dark UIs. Match the glow colour to your brand accent.
Markup
<button class="fh-hover-glow">Get started</button>CSS
.fh-hover-glow {
transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.fh-hover-glow:hover {
box-shadow: 0 0 24px rgba(139, 92, 246, 0.65);
border-color: rgba(139, 92, 246, 0.8);
}A light streak sweeps across the element, like light catching glass. The parent needs overflow: hidden.
Markup
<button class="fh-hover-shine">Buy now</button>CSS
.fh-hover-shine {
position: relative;
overflow: hidden;
}
.fh-hover-shine::after {
content: '';
position: absolute;
top: 0; left: -80%;
width: 50%; height: 100%;
background: linear-gradient(105deg,
transparent, rgba(255, 255, 255, 0.35), transparent);
transform: skewX(-20deg);
transition: left 0.55s ease;
}
.fh-hover-shine:hover::after {
left: 130%;
}An accent border snaps into place from slightly outside the element. border-radius: inherit keeps it matching any shape.
Markup
<button class="fh-hover-border">Learn more</button>CSS
.fh-hover-border {
position: relative;
}
.fh-hover-border::before {
content: '';
position: absolute;
inset: 0;
border: 2px solid #06b6d4;
border-radius: inherit;
opacity: 0;
transform: scale(1.15);
transition: transform 0.3s ease, opacity 0.3s ease;
pointer-events: none;
}
.fh-hover-border:hover::before {
opacity: 1;
transform: scale(1);
}The underline grows from the left instead of just appearing — the detail that separates polished nav links from defaults.
Markup
<a href="#" class="fh-hover-underline">About us</a>CSS
.fh-hover-underline {
position: relative;
text-decoration: none;
}
.fh-hover-underline::after {
content: '';
position: absolute;
left: 0; bottom: -4px;
width: 100%; height: 2px;
background: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.fh-hover-underline:hover::after {
transform: scaleX(1);
}A fixed-angle 3D tilt with zero JavaScript. For cursor-tracking tilt you need JS — but this covers 80% of the effect.
Markup
<div class="card fh-hover-tilt">Card content</div>CSS
.fh-hover-tilt {
transition: transform 0.3s ease;
}
.fh-hover-tilt:hover {
transform: perspective(600px) rotateX(8deg) rotateY(-10deg) scale(1.03);
}The gradient slides rather than swaps — animating background-position is smooth, while animating background colours directly is not.
Markup
<button class="fh-hover-gradient">Get started</button>CSS
.fh-hover-gradient {
background: linear-gradient(120deg, #8b5cf6, #06b6d4, #10b981);
background-size: 220% 100%;
background-position: 0% 50%;
transition: background-position 0.5s ease;
color: #fff;
}
.fh-hover-gradient:hover {
background-position: 100% 50%;
}A hover state answers a question the user is already asking: is this thing clickable? That's why the most effective hover effects are subtle and instant — they confirm interactivity rather than performing. A card that lifts 4px on hover communicates "you can click me" more clearly than one that spins.
Keep durations short. Interface feedback belongs in the 150–300ms range; anything slower feels laggy because the user has already decided to click. Save longer, more elaborate motion for entrances, where there's no pending interaction to delay.
Roughly half of web traffic has no hover at all. On touch devices, a hover state typically fires on tap — after the user has already committed — so any information you hide behind hover is effectively invisible to them.
The rule that follows: hover may enhance, never reveal. If a caption, a menu, or a "delete" button only appears on hover, mobile users can't reach it. Where you need hover-only styling, scope it with @media (hover: hover) so touch devices skip it entirely rather than getting a sticky stuck-on state.
Keyboard users never trigger hover. Every hover effect on an interactive element should have a matching :focus-visible style, or the entire interface becomes untraceable when tabbing through it. Writing a:hover, a:focus-visible { … } costs nothing and is a WCAG requirement, not a nicety.
Each effect here transitions transform, opacity, box-shadow or background-position — properties the browser can handle without recalculating layout. Animating width, height, margin or top on hover forces layout on every frame and is the usual cause of janky hover states on lower-powered devices.
Not meaningfully. Touch devices have no hover, and the state usually fires on tap after the user has committed. Use hover to enhance, never to reveal content, and scope hover-only styles with @media (hover: hover).
Between 150 and 300 milliseconds. Interface feedback needs to feel instant — longer transitions feel sluggish because the user has already decided to click before the animation finishes.
Yes. Keyboard users never trigger hover, so pairing every hover rule with :focus-visible is what keeps an interface navigable by keyboard — and it is a WCAG requirement, not an optional extra.
Build a CSS flip card with perspective, preserve-3d and backface-visibility. Stack faces with grid, flip on focus or a button, respect reduced motion.
Read the recipe → Deep diveAnimate link underlines with ::after and scaleX, a background-size gradient that survives line wraps, or text-decoration transitions, accessibly.
Read the recipe → Deep diveThree ways to build a gradient border in CSS, with live demos: border-image, clipped backgrounds and a conic pseudo-element, animated with @property.
Read the recipe → MenusDropdowns, staggered items and hamburger morphs
Browse the category → FormsFocus glows, floating labels and toggles
Browse the category → ImagesHover zooms, greyscale reveals and caption slides
Browse the category →