{ CF }
27 examples Responsive Uses JS intermediate

27 CSS Card Hover Effects

cardshoveranimationcss-onlyinteractive

27 original CSS card hover effects — elastic lift, 3D tilt, holographic, spotlight, aurora, and more. Pure CSS where possible. Copy any snippet and drop it straight into your project.

27 unique effects 23 pure CSS 4 CSS + JS 0 dependencies
01 / 27
Elastic Lift
Pure CSS
Design

Elastic Lift

Springs up with an overshoot bounce.

Card springs upward with a cubic-bezier overshoot, expands its shadow and highlights the border on hover.
.card {
  padding: 24px; border-radius: 16px;
  background: #17171f;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  cursor: pointer; position: relative;
  transition:
    transform .45s cubic-bezier(.34,1.56,.64,1),
    box-shadow .45s cubic-bezier(.34,1.56,.64,1),
    border-color .3s;
}
.card:hover {
  transform: translateY(-12px);
  box-shadow:
    0 20px 40px rgba(124,108,255,.22),
    0 8px 16px rgba(0,0,0,.3);
  border-color: rgba(124,108,255,.4);
}
<div class="card">
  <span class="card__tag">Design</span>
  <h4 class="card__title">Elastic Lift</h4>
  <p class="card__body">Description text.</p>
</div>
02 / 27
Gradient Border Draw
Pure CSS
Frontend

Border Draw

A gradient border traces itself on hover.

A conic-gradient rainbow border fades in around the card perimeter on hover via an inset pseudo-element.
.card {
  position: relative; padding: 24px;
  border-radius: 14px; background: #17171f;
  border: 1px solid rgba(255,255,255,.06);
  cursor: pointer; z-index: 0;
  transition: border-color .3s;
}
.card::before {
  content: "";
  position: absolute; inset: -1.5px;
  border-radius: 15px;
  background: conic-gradient(from 0deg,
    #7c6cff, #ff6c8a, #3de8f5, #1ed98a, #7c6cff);
  z-index: -1; opacity: 0; transition: opacity .4s;
}
.card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 13px; background: #17171f; z-index: -1;
}
.card:hover::before { opacity: 1; }
.card:hover { border-color: transparent; }
<div class="card">
  <span class="card__tag">Frontend</span>
  <h4 class="card__title">Border Draw</h4>
  <p class="card__body">Description.</p>
</div>
03 / 27
Stacked Reveal
Pure CSS
CSS

Stacked Reveal

Hidden cards fan out from beneath.

Two ghost cards fan out from beneath the front card on hover using rotate and translate transforms.
.stack { position: relative; cursor: pointer; }
.stack__back {
  position: absolute; inset: 0; border-radius: 14px;
  transition: transform .4s cubic-bezier(.23,1,.32,1);
}
.stack__back--1 {
  background: rgba(124,108,255,.3);
  border: 1px solid rgba(124,108,255,.4);
}
.stack__back--2 {
  background: rgba(255,108,138,.2);
  border: 1px solid rgba(255,108,138,.3);
}
.stack__front {
  position: relative; z-index: 2;
  padding: 24px; border-radius: 14px;
  background: #17171f;
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .4s cubic-bezier(.23,1,.32,1);
}
.stack:hover .stack__back--1 {
  transform: translate(-12px, 8px) rotate(-4deg);
}
.stack:hover .stack__back--2 {
  transform: translate(12px, 10px) rotate(4deg);
}
.stack:hover .stack__front { transform: translateY(-4px); }
<div class="stack">
  <div class="stack__back stack__back--2"></div>
  <div class="stack__back stack__back--1"></div>
  <div class="stack__front">
    <h4>Card Title</h4>
    <p>Description.</p>
  </div>
</div>
04 / 27
Holographic Shimmer
Pure CSS
Ultra Rare

Holographic

Rainbow light sweeps the surface.

A rainbow gradient sweeps across the card on hover using translateX over a multi-colour iridescent base layer.
.card {
  position: relative; overflow: hidden;
  padding: 24px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  cursor: pointer;
}
.card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    rgba(124,108,255,.18), rgba(61,232,245,.14),
    rgba(255,108,138,.18), rgba(30,217,138,.14));
  opacity: .7;
}
.card__shine {
  position: absolute; inset: 0;
  background: linear-gradient(110deg,
    transparent 20%, rgba(255,255,255,.18) 50%, transparent 80%);
  transform: translateX(-100%);
  transition: transform .6s ease;
}
.card:hover .card__shine { transform: translateX(100%); }
.card__bar {
  height: 3px; border-radius: 2px; margin-top: 16px;
  background: linear-gradient(90deg, #7c6cff, #ff6c8a, #3de8f5);
}
.card__tag, .card__title, .card__body,
.card__bar { position: relative; z-index: 1; }
<div class="card">
  <div class="card__shine"></div>
  <span class="card__tag">Ultra Rare</span>
  <h4 class="card__title">Holographic</h4>
  <p class="card__body">Description.</p>
  <div class="card__bar"></div>
</div>
05 / 27
Curtain Reveal
Pure CSS
Motion

Curtain Reveal

Content slides into view as overlay pulls away.

Explore →
A solid gradient overlay slides upward like a stage curtain to reveal the card content underneath.
.card {
  position: relative; overflow: hidden;
  padding: 24px; border-radius: 14px;
  background: #17171f;
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer; min-height: 160px;
}
.card__curtain {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, #7c6cff, #ff6c8a);
  transform: translateY(0);
  transition: transform .45s cubic-bezier(.23,1,.32,1);
  z-index: 1;
}
.card:hover .card__curtain { transform: translateY(-100%); }
.card__content { position: relative; z-index: 2; }
.card__cta {
  display: inline-block; margin-top: 12px;
  font-size: 13px; color: #7c6cff; font-weight: 600;
  transform: translateY(8px); opacity: 0;
  transition: transform .35s .15s ease, opacity .35s .15s ease;
}
.card:hover .card__cta { transform: translateY(0); opacity: 1; }
<div class="card">
  <div class="card__curtain"></div>
  <div class="card__content">
    <h4>Title</h4>
    <p>Description.</p>
    <span class="card__cta">Explore &rarr;</span>
  </div>
</div>
06 / 27
Corner Peel
Pure CSS
Effect

Corner Peel

Bottom-right corner folds up on hover.

The bottom-right corner peels away to reveal a gradient triangle, growing from 0 to 72px on hover.
.card {
  position: relative; overflow: hidden;
  padding: 24px; border-radius: 14px;
  background: #17171f;
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer; transition: box-shadow .3s;
}
.card:hover { box-shadow: 0 12px 32px rgba(0,0,0,.4); }
.card__peel {
  position: absolute; bottom: 0; right: 0;
  width: 0; height: 0;
  background: linear-gradient(
    225deg, #7c6cff 45%, rgba(255,255,255,.05) 45%);
  transition:
    width .35s cubic-bezier(.23,1,.32,1),
    height .35s cubic-bezier(.23,1,.32,1);
}
.card:hover .card__peel { width: 64px; height: 64px; }
<div class="card">
  <div class="card__peel"></div>
  <h4 class="card__title">Corner Peel</h4>
  <p class="card__body">Description.</p>
</div>
07 / 27
Neon Sign
Pure CSS
Neon

Neon Sign

Hover to see the glow flicker to life.

Border glows and title text pulses with layered neon box-shadows on hover, with a CSS flicker animation.
.card {
  padding: 24px; border-radius: 14px;
  background: #07070e;
  border: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
  transition: border-color .3s, box-shadow .3s;
}
.card:hover {
  border-color: rgba(124,108,255,.6);
  box-shadow: 0 0 28px rgba(124,108,255,.12),
              inset 0 0 28px rgba(124,108,255,.04);
}
.card__title {
  font-size: 22px; letter-spacing: .04em;
  transition: text-shadow .3s, color .3s;
}
.card:hover .card__title {
  color: #c0b4ff;
  text-shadow:
    0 0  6px #7c6cff,
    0 0 14px #7c6cff,
    0 0 30px rgba(124,108,255,.5);
  animation: neon-flicker 1.2s ease-out forwards;
}
@keyframes neon-flicker {
  0%,100%{ opacity:1; } 8%{ opacity:.82; }
  10%{ opacity:1; } 60%{ opacity:.9; } 62%{ opacity:1; }
}
.card__line {
  margin-top: 14px; height: 2px; border-radius: 1px;
  background: rgba(255,255,255,.07);
  transition: background .3s, box-shadow .3s;
}
.card:hover .card__line {
  background: #7c6cff; box-shadow: 0 0 8px #7c6cff;
}
<div class="card">
  <h4 class="card__title">Neon Sign</h4>
  <p class="card__body">Hover to see the glow flicker.</p>
  <div class="card__line"></div>
</div>
08 / 27
Scanline
Pure CSS
SYSTEM

Scanline

CRT scanlines sweep the surface on hover.

CRT-style horizontal scanlines scroll over the card surface on hover using a repeating-linear-gradient animation.
.card {
  position: relative; overflow: hidden;
  padding: 24px; border-radius: 14px;
  background: #0a0a0a;
  border: 1px solid rgba(30,217,138,.2);
  font-family: monospace; color: #1ed98a;
  cursor: pointer; transition: box-shadow .3s;
}
.card:hover {
  box-shadow: 0 0 24px rgba(30,217,138,.18),
              inset 0 0 24px rgba(30,217,138,.04);
}
.card__scanlines {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 3px,
    rgba(0,0,0,.22) 3px, rgba(0,0,0,.22) 4px);
  opacity: 0; transition: opacity .4s;
}
.card:hover .card__scanlines {
  opacity: 1;
  animation: scan-scroll 4s linear infinite;
}
@keyframes scan-scroll {
  from { background-position: 0 0; }
  to   { background-position: 0 40px; }
}
<div class="card">
  <div class="card__scanlines"></div>
  <span class="card__tag">SYSTEM</span>
  <h4 class="card__title">Scanline</h4>
  <p class="card__body">Description.</p>
</div>
09 / 27
Depth Parallax
CSS + JS
3D

Depth Parallax

Layers shift at different speeds.

Three layers — background, mid, and foreground — shift at different speeds as the cursor moves, creating a parallax depth illusion.
.card {
  position: relative; overflow: hidden;
  padding: 24px; border-radius: 14px;
  background: #0d0d1a;
  border: 1px solid rgba(255,255,255,.08);
  cursor: none;
  transform-style: preserve-3d;
  min-height: 130px;
}
.card__bg {
  position: absolute; inset: -12%;
  background:
    radial-gradient(ellipse at 60% 40%,
      rgba(124,108,255,.22), transparent 55%),
    radial-gradient(ellipse at 20% 80%,
      rgba(61,232,245,.14), transparent 50%);
  will-change: transform;
}
.card__mid, .card__fg {
  position: relative;
  will-change: transform;
}
<div class="card">
  <div class="card__bg"></div>
  <div class="card__mid">
    <h4 class="card__title">Depth Parallax</h4>
  </div>
  <div class="card__fg">
    <p class="card__body">Description.</p>
  </div>
</div>
const card = document.querySelector('.card');
const bg  = card.querySelector('.card__bg');
const mid = card.querySelector('.card__mid');
const fg  = card.querySelector('.card__fg');

card.addEventListener('mousemove', e => {
  const r = card.getBoundingClientRect();
  const x = (e.clientX - r.left) / r.width - 0.5;
  const y = (e.clientY - r.top) / r.height - 0.5;
  bg.style.transform  = `translate(${x * -20}px,${y * -20}px)`;
  mid.style.transform = `translate(${x * -12}px,${y * -12}px)`;
  fg.style.transform  = `translate(${x * -6}px, ${y * -6}px)`;
});
card.addEventListener('mouseleave', () => {
  bg.style.transform = mid.style.transform
    = fg.style.transform = '';
});
10 / 27
Spotlight
CSS + JS
Light

Spotlight

Cursor glow follows your mouse inside the card.

A soft radial glow follows the cursor around inside the card, illuminating wherever you look.
.card {
  position: relative; overflow: hidden;
  padding: 24px; border-radius: 14px;
  background: #111118;
  border: 1px solid rgba(255,255,255,.07);
  cursor: none; transition: border-color .3s;
}
.card:hover { border-color: rgba(124,108,255,.4); }
.card__glow {
  position: absolute;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle,
    rgba(124,108,255,.25) 0%, transparent 70%);
  transform: translate(-50%,-50%);
  pointer-events: none; opacity: 0;
  transition: opacity .3s; top: 50%; left: 50%;
}
.card:hover .card__glow { opacity: 1; }
.card__glow, .card__title,
.card__body { position: relative; z-index: 1; }
<div class="card">
  <div class="card__glow"></div>
  <h4 class="card__title">Spotlight</h4>
  <p class="card__body">Description.</p>
</div>
const card = document.querySelector('.card');
const glow = card.querySelector('.card__glow');

card.addEventListener('mousemove', e => {
  const r = card.getBoundingClientRect();
  glow.style.left = (e.clientX - r.left) + 'px';
  glow.style.top  = (e.clientY - r.top)  + 'px';
});
11 / 27
3D Tilt
CSS + JS
3D

3D Tilt

Mouse position controls the tilt angle.

Mouse position controls live rotateX/rotateY perspective transforms, with a radial shine that follows the cursor.
.card {
  position: relative; overflow: hidden;
  padding: 24px; border-radius: 14px;
  background: linear-gradient(160deg, #1a1a28, #111118);
  border: 1px solid rgba(255,255,255,.1);
  transform-style: preserve-3d;
  cursor: none; transition: transform .08s ease;
}
.card__shine {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%,
    rgba(255,255,255,.1) 0%, transparent 65%);
  pointer-events: none; opacity: 0; transition: opacity .3s;
}
.card:hover .card__shine { opacity: 1; }
.card__layer { transform: translateZ(22px); }
<div class="card">
  <div class="card__shine"></div>
  <div class="card__layer">
    <h4 class="card__title">3D Tilt</h4>
    <p class="card__body">Description.</p>
  </div>
</div>
const card = document.querySelector('.card');

card.addEventListener('mousemove', e => {
  const r = card.getBoundingClientRect();
  const x = (e.clientX - r.left) / r.width - 0.5;
  const y = (e.clientY - r.top) / r.height - 0.5;
  card.style.transform =
    `perspective(700px) rotateX(${-y * 14}deg) rotateY(${x * 14}deg)`;
});
card.addEventListener('mouseleave', () => {
  card.style.transform = '';
});
12 / 27
Slide Up Content
Pure CSS
🎨

Slide Up

Extra details slide up on hover. Read more →
Extra description and a CTA animate into view from below the title on hover using max-height and translateY.
.card {
  border-radius: 14px; overflow: hidden;
  background: #17171f;
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer;
  transition: box-shadow .35s,
    transform .35s cubic-bezier(.23,1,.32,1);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0,0,0,.42);
}
.card__image {
  height: 90px;
  background: linear-gradient(135deg, #1a1a2e, #0d0d2b);
  display: flex; align-items: center;
  justify-content: center; font-size: 32px;
  transition: transform .4s cubic-bezier(.23,1,.32,1);
}
.card:hover .card__image { transform: scale(1.05); }
.card__body { padding: 16px 18px; }
.card__hidden {
  font-size: 12px; color: #6b6987;
  max-height: 0; overflow: hidden; opacity: 0;
  transform: translateY(8px);
  transition: max-height .4s ease, opacity .35s ease,
    transform .4s cubic-bezier(.23,1,.32,1);
}
.card:hover .card__hidden {
  max-height: 60px; opacity: 1; transform: translateY(0);
}
.card__cta {
  display: inline-block; margin-top: 6px;
  font-size: 12px; color: #7c6cff; font-weight: 600;
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s .12s, transform .3s .12s;
}
.card:hover .card__cta { opacity: 1; transform: translateY(0); }
<div class="card">
  <div class="card__image"><span>🎨</span></div>
  <div class="card__body">
    <h4 class="card__title">Slide Up Content</h4>
    <div class="card__hidden">
      Extra details appear here.
      <span class="card__cta">Read more &rarr;</span>
    </div>
  </div>
</div>
13 / 27
Flip Card
Pure CSS
Hover

Flip Card

Hover to flip over.

The Back

Revealed with CSS 3D perspective.

Explore →
Pure CSS 3D card flip on hover using transform-style: preserve-3d and backface-visibility: hidden on both faces.
.scene {
  width: 100%; perspective: 800px; cursor: pointer;
}
.card {
  width: 100%; height: 155px; position: relative;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.23,1,.32,1);
}
.scene:hover .card { transform: rotateY(180deg); }
.card__front, .card__back {
  position: absolute; inset: 0;
  border-radius: 14px; padding: 22px;
  backface-visibility: hidden;
}
.card__front {
  background: #17171f;
  border: 1px solid rgba(255,255,255,.08);
}
.card__back {
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  transform: rotateY(180deg);
  display: flex; flex-direction: column;
  justify-content: center; color: #fff;
}
<div class="scene">
  <div class="card">
    <div class="card__front">
      <h4>Hover to Flip</h4>
      <p>Front content.</p>
    </div>
    <div class="card__back">
      <h4>The Back Side</h4>
      <p>Revealed on hover.</p>
    </div>
  </div>
</div>
14 / 27
Glitch Card
Pure CSS
Glitch

Glitch Card

RGB channel split flickers on hover.

Two colour-shifted clones with clip-path flicker on hover in opposite directions, simulating a digital signal glitch.
.card {
  position: relative; overflow: hidden;
  padding: 24px; border-radius: 14px;
  background: #0a0a0f;
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer; transition: border-color .2s;
}
.card:hover { border-color: rgba(255,108,138,.35); }
.card::before, .card::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; opacity: 0;
}
.card::before {
  background: rgba(255,108,138,.07);
  clip-path: polygon(0 18%, 100% 18%, 100% 45%, 0 45%);
}
.card::after {
  background: rgba(61,232,245,.07);
  clip-path: polygon(0 55%, 100% 55%, 100% 82%, 0 82%);
}
.card:hover::before, .card:hover::after { opacity: 1; }
.card:hover::before {
  animation: glitch-a .4s step-end infinite;
}
.card:hover::after {
  animation: glitch-b .4s step-end infinite .1s;
}
@keyframes glitch-a {
  0%,100%{ transform: translate(-4px,0);   }
  33%    { transform: translate(-6px, 2px); }
  66%    { transform: translate(-2px,-2px); }
}
@keyframes glitch-b {
  0%,100%{ transform: translate(4px,0);    }
  33%    { transform: translate(6px,-2px);  }
  66%    { transform: translate(2px, 2px);  }
}
<div class="card">
  <h4 class="card__title">Glitch Card</h4>
  <p class="card__body">Description.</p>
</div>
15 / 27
Gradient Rotate
Pure CSS
Color

Gradient Rotate

Border hue-rotates continuously on hover.

The card border becomes a conic-gradient that hue-rotates continuously on hover, cycling the full spectrum.
.card-wrap {
  border-radius: 14px; padding: 2px;
  cursor: pointer;
  background: rgba(255,255,255,.05);
  transition: background .3s;
}
.card-wrap:hover {
  background: conic-gradient(
    #7c6cff 0deg, #ff6c8a 90deg,
    #3de8f5 180deg, #1ed98a 270deg, #7c6cff 360deg);
  animation: hue-spin 4s linear infinite;
}
@keyframes hue-spin { to { filter: hue-rotate(360deg); } }
.card {
  border-radius: 12px; padding: 24px;
  background: #17171f;
}
<div class="card-wrap">
  <div class="card">
    <h4 class="card__title">Gradient Rotate</h4>
    <p class="card__body">Description.</p>
  </div>
</div>
16 / 27
Border Morph
Pure CSS
Morph

Border Morph

Corners morph to an organic blob shape.

The card border-radius morphs to an organic blob shape and scales up on hover with a spring cubic-bezier.
.card {
  padding: 24px; border-radius: 14px;
  border: 2px solid rgba(124,108,255,.3);
  background: rgba(124,108,255,.05);
  cursor: pointer;
  transition:
    border-radius .55s cubic-bezier(.34,1.56,.64,1),
    border-color .3s, background .3s,
    transform .35s, box-shadow .35s;
}
.card:hover {
  border-radius: 48% 52% 68% 32% / 42% 38% 62% 58%;
  border-color: #7c6cff;
  background: rgba(124,108,255,.12);
  transform: scale(1.05);
  box-shadow: 0 12px 32px rgba(124,108,255,.22);
}
<div class="card">
  <h4 class="card__title">Border Morph</h4>
  <p class="card__body">Description.</p>
</div>
17 / 27
Magnetic Float
Pure CSS
Float

Magnetic Float

Orbit dots scatter on hover with spring easing.

Three orbit dots scatter to different positions on hover with spring easing, while the card floats upward.
.card {
  position: relative; overflow: visible;
  padding: 24px; border-radius: 14px;
  background: #17171f;
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer;
  transition:
    transform .42s cubic-bezier(.34,1.56,.64,1),
    box-shadow .42s;
}
.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 22px 44px rgba(0,0,0,.42);
}
.card__dot {
  position: absolute; border-radius: 50%;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}
.card__dot--a { width:11px; height:11px; background:#7c6cff; top:18px; right:18px; }
.card__dot--b { width: 8px; height: 8px;  background:#ff6c8a; bottom:22px; left:22px; }
.card__dot--c { width: 6px; height: 6px;  background:#1ed98a; top:50%; right:14px; }
.card:hover .card__dot--a { transform: translate(10px,-12px) scale(1.5); }
.card:hover .card__dot--b { transform: translate(-10px,10px) scale(1.4); }
.card:hover .card__dot--c { transform: translate(8px,0) scale(1.6); }
<div class="card">
  <div class="card__dot card__dot--a"></div>
  <div class="card__dot card__dot--b"></div>
  <div class="card__dot card__dot--c"></div>
  <h4 class="card__title">Magnetic Float</h4>
  <p class="card__body">Description.</p>
</div>
18 / 27
Typewriter Reveal
Pure CSS
Terminal

Typewriter

$ npm run deploy --prod
A hidden line types in from zero width using max-width transition, with a blinking terminal cursor via CSS animation.
.card {
  padding: 24px; border-radius: 14px;
  background: #07070e;
  border: 1px solid rgba(30,217,138,.2);
  font-family: monospace; cursor: pointer;
  transition: border-color .3s, box-shadow .3s;
}
.card:hover {
  border-color: rgba(30,217,138,.5);
  box-shadow: 0 0 24px rgba(30,217,138,.1);
}
.card__title { color: #1ed98a; }
.card__hidden {
  font-size: 12px; color: #1ed98a;
  max-width: 0; overflow: hidden;
  white-space: nowrap; opacity: 0;
  transition: max-width .75s cubic-bezier(.23,1,.32,1),
              opacity .25s;
}
.card:hover .card__hidden { max-width: 400px; opacity: 1; }
.card__cursor {
  display: inline-block; width: 8px; height: 14px;
  background: #1ed98a; vertical-align: middle; opacity: 0;
}
.card:hover .card__cursor {
  opacity: 1;
  animation: type-blink .7s step-end infinite;
}
@keyframes type-blink { 0%,100%{ opacity:1; } 50%{ opacity:0; } }
<div class="card">
  <h4 class="card__title">Typewriter</h4>
  <div class="card__line">
    <span class="card__hidden">$ npm run deploy</span>
    <span class="card__cursor"></span>
  </div>
</div>
19 / 27
Overlay Slide
Pure CSS
View Project →
🚀 Project

Overlay Slide

Full overlay slides in from the left.

A full gradient overlay slides in from the left on hover, revealing a CTA that fades in with a stagger delay.
.card {
  position: relative; overflow: hidden;
  padding: 24px; border-radius: 14px;
  background: #17171f;
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer; min-height: 130px;
}
.card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    rgba(124,108,255,.94), rgba(255,108,138,.9));
  transform: translateX(-101%);
  transition: transform .42s cubic-bezier(.23,1,.32,1);
  display: flex; align-items: center;
  justify-content: center; z-index: 2;
  border-radius: inherit;
}
.card:hover .card__overlay { transform: translateX(0); }
.card__cta {
  color: #fff; font-size: 15px; font-weight: 700;
  letter-spacing: .04em;
  transform: translateX(-18px); opacity: 0;
  transition: transform .35s .16s ease, opacity .35s .16s ease;
}
.card:hover .card__cta { transform: translateX(0); opacity: 1; }
.card__icon { font-size: 28px; margin-bottom: 10px; color: #7c6cff; }
<div class="card">
  <div class="card__overlay">
    <span class="card__cta">View Project &rarr;</span>
  </div>
  <div class="card__content">
    <h4 class="card__title">Overlay Slide</h4>
    <p class="card__body">Description.</p>
  </div>
</div>
20 / 27
Grain Texture
Pure CSS
Texture

Grain Texture

Film grain animates over the surface on hover.

An SVG noise layer animates in with mix-blend-mode: overlay on hover, giving the card an organic film grain texture.
.card {
  position: relative; overflow: hidden;
  padding: 24px; border-radius: 14px;
  background: linear-gradient(135deg, #1a1228, #0d0d1a);
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer;
  transition: box-shadow .35s,
    transform .35s cubic-bezier(.23,1,.32,1);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(0,0,0,.55);
}
.card__noise {
  position: absolute; inset: -50%;
  width: 200%; height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0; mix-blend-mode: overlay;
  pointer-events: none; transition: opacity .4s;
  animation: grain-shift 6s steps(1) infinite paused;
}
.card:hover .card__noise {
  opacity: .45; animation-play-state: running;
}
@keyframes grain-shift {
  0%  { transform: translate(0,0);     }
  25% { transform: translate(-3%,-4%); }
  50% { transform: translate(2%,3%);   }
  75% { transform: translate(-4%,2%);  }
  100%{ transform: translate(0,0);     }
}
.card__title, .card__body { position: relative; z-index: 1; }
<div class="card">
  <div class="card__noise"></div>
  <h4 class="card__title">Grain Texture</h4>
  <p class="card__body">Description.</p>
</div>
21 / 27
Frosted Glass Intensify
Pure CSS
Glass

Frosted Glass

Backdrop blur intensifies on hover.

Backdrop-filter blur and saturation ramp up from 0 to 14px on hover, intensifying a frosted glass effect over coloured orbs.
.card {
  position: relative; overflow: hidden;
  padding: 24px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  cursor: pointer; min-height: 130px;
  transition: border-color .4s, box-shadow .4s;
}
.card:hover {
  border-color: rgba(255,255,255,.3);
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
}
.card__bg {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(135deg, #1a0533, #0a1535, #0d2b1a);
}
.card__bg::before {
  content: ""; position: absolute; border-radius: 50%;
  width: 120px; height: 120px;
  background: rgba(124,108,255,.55);
  top: -20px; right: -20px; filter: blur(40px);
}
.card__bg::after {
  content: ""; position: absolute; border-radius: 50%;
  width: 100px; height: 100px;
  background: rgba(61,232,245,.4);
  bottom: -10px; left: 0; filter: blur(40px);
}
.card__frost {
  position: absolute; inset: 0; z-index: 1;
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  transition: backdrop-filter .5s ease,
    -webkit-backdrop-filter .5s ease;
}
.card:hover .card__frost {
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
}
.card__content { position: relative; z-index: 2; }
<div class="card">
  <div class="card__bg"></div>
  <div class="card__frost"></div>
  <div class="card__content">
    <h4 class="card__title">Frosted Glass</h4>
    <p class="card__body">Description.</p>
  </div>
</div>
22 / 27
Blueprint Reveal
Pure CSS
// BLUEPRINT

Blueprint

Grid lines and corner marks appear on hover.

Engineering blueprint aesthetic: a dot grid and corner crosshair marks fade in on hover, with title and body shifting to cyan.
.card {
  position: relative; overflow: hidden;
  padding: 24px; border-radius: 14px;
  background: #17171f;
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer;
  transition: background .4s, border-color .4s, box-shadow .4s;
}
.card:hover {
  background: #041428;
  border-color: rgba(61,232,245,.5);
  box-shadow: 0 0 32px rgba(61,232,245,.1),
              inset 0 0 32px rgba(61,232,245,.04);
}
.card__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(61,232,245,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61,232,245,.08) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0; transition: opacity .4s;
}
.card:hover .card__grid { opacity: 1; }
.card__mark {
  position: absolute; width: 14px; height: 14px;
  opacity: 0; transition: opacity .3s .15s;
}
.card__mark::before, .card__mark::after {
  content: ""; position: absolute; background: rgba(61,232,245,.7);
}
.card__mark::before { width: 1px; height: 100%; left: 50%; }
.card__mark::after  { width: 100%; height: 1px; top: 50%; }
.card__mark--tl { top:10px; left:10px; }
.card__mark--tr { top:10px; right:10px; }
.card__mark--bl { bottom:10px; left:10px; }
.card__mark--br { bottom:10px; right:10px; }
.card:hover .card__mark { opacity: 1; }
.card__label {
  font-family: monospace; font-size: 10px;
  color: rgba(61,232,245,.5); letter-spacing: .12em;
  text-transform: uppercase; display: block;
  margin-bottom: 6px; opacity: 0;
  transition: opacity .3s .1s;
}
.card:hover .card__label { opacity: 1; }
.card__title { transition: color .35s; }
.card:hover .card__title { color: #3de8f5; }
.card__content { position: relative; z-index: 2; }
<div class="card">
  <div class="card__grid"></div>
  <div class="card__marks">
    <div class="card__mark card__mark--tl"></div>
    <div class="card__mark card__mark--tr"></div>
    <div class="card__mark card__mark--bl"></div>
    <div class="card__mark card__mark--br"></div>
  </div>
  <div class="card__content">
    <span class="card__label">// BLUEPRINT</span>
    <h4 class="card__title">Blueprint</h4>
    <p class="card__body">Description.</p>
  </div>
</div>
23 / 27
Shockwave
Pure CSS
Pulse

Shockwave

Two ripple rings expand outward on hover.

Two concentric ring pulses expand outward from the card border on hover, like a shockwave ripple effect.
.card {
  position: relative; overflow: visible;
  padding: 24px; border-radius: 14px;
  background: #17171f;
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer;
  transition: border-color .3s, transform .3s;
}
.card:hover {
  border-color: rgba(124,108,255,.5);
  transform: scale(1.02);
}
.card::before, .card::after {
  content: ""; position: absolute; inset: -8px;
  border-radius: 20px;
  border: 2px solid rgba(124,108,255,.55);
  opacity: 0; pointer-events: none;
}
.card:hover::before {
  animation: shockwave-a .7s cubic-bezier(.2,.6,.4,1) forwards;
}
.card:hover::after {
  animation: shockwave-b .7s cubic-bezier(.2,.6,.4,1) .18s forwards;
}
@keyframes shockwave-a {
  0%   { transform: scale(1);    opacity: .8; }
  100% { transform: scale(1.18); opacity: 0;  }
}
@keyframes shockwave-b {
  0%   { transform: scale(1);    opacity: .5; }
  100% { transform: scale(1.32); opacity: 0;  }
}
<div class="card">
  <h4 class="card__title">Shockwave</h4>
  <p class="card__body">Description.</p>
</div>
24 / 27
Color Burn
Pure CSS
Burn

Color Burn

Gradient bloom erupts from the corner.

A radial gradient bloom erupts from the bottom-left corner and expands to fill the entire card on hover.
.card {
  position: relative; overflow: hidden;
  padding: 24px; border-radius: 14px;
  background: #0a0a0f;
  border: 1px solid rgba(255,255,255,.07);
  cursor: pointer; transition: border-color .4s;
}
.card:hover { border-color: rgba(255,108,138,.4); }
.card__burn {
  position: absolute;
  bottom: -60px; left: -60px;
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,108,138,.9) 0%,
    rgba(124,108,255,.65) 40%, transparent 70%);
  transform: scale(0); transform-origin: center;
  pointer-events: none; filter: blur(2px);
  transition: transform .55s cubic-bezier(.23,1,.32,1),
              border-radius .55s ease;
}
.card:hover .card__burn {
  transform: scale(5.5); border-radius: 40%;
}
.card__title, .card__body {
  position: relative; z-index: 1;
}
<div class="card">
  <div class="card__burn"></div>
  <h4 class="card__title">Color Burn</h4>
  <p class="card__body">Description.</p>
</div>
25 / 27
Prismatic Sweep
Pure CSS
Prism

Prismatic Sweep

Three colour beams sweep across in sequence.

Three skewed colour beams sweep across the card in a staggered sequence, like light through a prism.
.card {
  position: relative; overflow: hidden;
  padding: 24px; border-radius: 14px;
  background: #111118;
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer; transition: border-color .3s;
}
.card:hover { border-color: rgba(255,255,255,.2); }
.card__prism {
  position: absolute; inset: -20%; width: 30%;
  transform: skewX(-18deg) translateX(-180%);
  transition: transform .52s cubic-bezier(.23,1,.32,1);
  opacity: .18;
}
.card__prism--a { background:#7c6cff; left:10%; transition-delay:0s;    }
.card__prism--b { background:#ff6c8a; left:30%; transition-delay:.08s;  }
.card__prism--c { background:#3de8f5; left:50%; transition-delay:.16s;  }
.card:hover .card__prism {
  transform: skewX(-18deg) translateX(700%);
}
.card__content { position: relative; z-index: 1; }
<div class="card">
  <div class="card__prism card__prism--a"></div>
  <div class="card__prism card__prism--b"></div>
  <div class="card__prism card__prism--c"></div>
  <div class="card__content">
    <h4 class="card__title">Prismatic Sweep</h4>
    <p class="card__body">Description.</p>
  </div>
</div>
26 / 27
Book Open
Pure CSS

Hidden content revealed as you open the book.

Read now →
Preview

Book Open

Cover folds open like a book page.

The card cover folds open like a book page using perspective rotateY, revealing hidden content on the reverse page.
.card {
  height: 160px; border-radius: 14px;
  position: relative; cursor: pointer;
  box-shadow: -4px 0 16px rgba(0,0,0,.4);
}
.card__page {
  position: absolute; inset: 0;
  border-radius: 14px; padding: 22px;
  background: linear-gradient(135deg, #1a1228, #111118);
  border: 1px solid rgba(124,108,255,.25);
  display: flex; flex-direction: column;
  justify-content: center; gap: 8px;
  color: rgba(255,255,255,.65); font-size: 12px;
}
.card__cover {
  position: absolute; inset: 0;
  border-radius: 14px; padding: 22px;
  background: #17171f;
  border: 1px solid rgba(255,255,255,.1);
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform .62s cubic-bezier(.23,1,.32,1), box-shadow .62s;
  z-index: 2;
  box-shadow: inset -6px 0 18px rgba(0,0,0,.3);
}
.card:hover .card__cover {
  transform: perspective(900px) rotateY(-62deg);
  box-shadow: inset -6px 0 18px rgba(0,0,0,.55),
              6px 0 22px rgba(0,0,0,.45);
}
<div class="card">
  <div class="card__page">
    <p>Hidden content here.</p>
    <span>Read now &rarr;</span>
  </div>
  <div class="card__cover">
    <h4 class="card__title">Book Open</h4>
    <p class="card__body">Hover to open.</p>
  </div>
</div>
27 / 27
Aurora
CSS + JS
Aurora

Aurora

Two light orbs follow your cursor through the card.

Two blurred light orbs track cursor position independently, creating a living aurora borealis inside the card.
.card {
  position: relative; overflow: hidden;
  padding: 24px; border-radius: 16px;
  background: #050510;
  border: 1px solid rgba(255,255,255,.08);
  cursor: none; min-height: 130px;
  transition: border-color .4s;
}
.card:hover { border-color: rgba(124,108,255,.4); }
.card__aurora {
  position: absolute; inset: 0; pointer-events: none;
}
.card__aurora::before, .card__aurora::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(48px); opacity: 0;
  transition: opacity .4s;
  transform: translate(-50%,-50%);
}
.card__aurora::before {
  width: 160px; height: 160px;
  background: rgba(124,108,255,.55);
  left: var(--ax, 30%); top: var(--ay, 40%);
}
.card__aurora::after {
  width: 130px; height: 130px;
  background: rgba(30,217,138,.4);
  left: var(--bx, 70%); top: var(--by, 60%);
}
.card:hover .card__aurora::before,
.card:hover .card__aurora::after { opacity: 1; }
.card__content { position: relative; z-index: 1; }
<div class="card">
  <div class="card__aurora"></div>
  <div class="card__content">
    <h4 class="card__title">Aurora</h4>
    <p class="card__body">Description.</p>
  </div>
</div>
const card = document.querySelector('.card');
const aurora = card.querySelector('.card__aurora');

card.addEventListener('mousemove', e => {
  const r = card.getBoundingClientRect();
  const x = (e.clientX - r.left) / r.width * 100;
  const y = (e.clientY - r.top)  / r.height * 100;
  aurora.style.setProperty('--ax', x + '%');
  aurora.style.setProperty('--ay', y + '%');
  aurora.style.setProperty('--bx', (100 - x) + '%');
  aurora.style.setProperty('--by', (100 - y) + '%');
});

Related collections

21 CSS Button Hover Effects preview

21 CSS Button Hover Effects

21

21 original CSS button hover effects — liquid fill, glitch, neon pulse, 3D flip, particle burst and more. Pure CSS with 3 vanilla JS enhancements. Copy-paste ready.

buttons hover animation Responsive
20 CSS Link Hover Effect Designs preview

20 CSS Link Hover Effect Designs

20

20 free CSS link hover effects — animated underlines, glitches, neon flickers, marker highlights, 3D flips and more, with copy-paste code.

css link hover link effects underline animation Responsive
15 Pure CSS Loading Animations preview

15 Pure CSS Loading Animations

15

15 hand-coded CSS loading animations — DNA helix, liquid blob, orbit system, signal bars, clock sweep, bouncing chain, neon ring draw, pixel dissolve, hourglass flip, heartbeat line, House Unlock, Listing Card Skeleton, semantic Progress Path, Heat-Map Compass and a Floor-by-Floor building loader. Pure CSS, accessible, drop-in ready.

loading spinner animation Responsive