33 CSS Card Hover Effects
28 / 33

All 33 in 33 CSS Card Hover Effects

  1. 013D Tilt & Parallax Card Effects
  2. 02Glowing Gradient & Glassmorphic Borders
  3. 03Image Zoom with Content Reveal / Slide-Up
  4. 043D Flip Cards (Front to Back)
  5. 05Parent Blur / Sibling De-emphasis (Focus States)
  6. 06Minimalist Elevation & Dynamic Shadows
  7. 07Elastic Lift
  8. 08Gradient Border Draw
  9. 09Stacked Reveal
  10. 10Holographic Shimmer
  11. 11Curtain Reveal
  12. 12Corner Peel
  13. 13Neon Sign
  14. 14Scanline
  15. 15Depth Parallax
  16. 16Spotlight
  17. 173D Tilt
  18. 18Slide Up Content
  19. 19Flip Card
  20. 20Glitch Card
  21. 21Gradient Rotate
  22. 22Border Morph
  23. 23Magnetic Float
  24. 24Typewriter Reveal
  25. 25Overlay Slide
  26. 26Grain Texture
  27. 27Frosted Glass Intensify
  28. 28Blueprint Reveal
  29. 29Shockwave
  30. 30Color Burn
  31. 31Prismatic Sweep
  32. 32Book Open
  33. 33Aurora
Pure CSSMIT licensed

Blueprint Reveal

A product card where a circular wipe transforms the finished object into a technical blueprint drawing with dimension lines and specs. Great for design, manufacturing, architecture, and engineering brands that want to show the craft behind the product.

Live Demo
Plain CSSTailwind v4
Try it

Build UI like this from scratch: Flexbox, Grid, animations & responsive CSS

ZTM · The CSS Bootcamp · 30‑day money-back guarantee · Affiliate link

10% off at checkout with code
Check ZTM Course

The code

<div class="card-28">
  <article class="card-28__card">
    <div class="card-28__product">
      <span class="card-28__meta" style="color:#5a6a7d;">MODEL · ARC-01</span>
      <div class="card-28__shape"></div>
      <div>
        <h2 class="card-28__title-p">Arc Pendant</h2>
        <p style="font-size:0.82rem;color:#5a6a7d;line-height:1.6;margin-top:0.4rem;">Hand-blown matte ceramic lamp.</p>
      </div>
    </div>
    <div class="card-28__blue">
      <span class="card-28__meta">DRAWING № 01 — REV C</span>
      <div class="card-28__draw"></div>
      <div>
        <h2 class="card-28__title-b">Arc Pendant<br>Cross-Section</h2>
        <p class="card-28__specs">Ø 130mm · cord 1.8m<br>E27 · 2700K · matte glaze<br>TOL ±0.5mm</p>
      </div>
    </div>
  </article>
</div>
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;700&family=Spline+Sans+Mono:wght@400;500&display=swap');

.card-28,
.card-28 *,
.card-28 *::before,
.card-28 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.card-28 {
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #e9ebee;
  font-family: 'Spline Sans Mono', monospace;
  padding: 2rem;
}

.card-28__card {
  position: relative;
  width: 340px;
  height: 440px;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  background: #fdfdfb;
  border: 1px solid #d4d8de;
  box-shadow: 0 16px 36px rgba(30,50,80,0.15);
}

.card-28__product {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.4rem;
  color: #1a2533;
  background: radial-gradient(circle at 70% 20%, #f0f3f7, #fdfdfb 60%);
  transition: opacity 0.5s ease;
}

.card-28__shape {
  width: 130px;
  height: 130px;
  margin: 1rem auto;
  border-radius: 50% 50% 50% 12px;
  background: linear-gradient(145deg, #2d6cdf, #16306b);
  box-shadow: 0 14px 30px rgba(40,80,160,0.35);
}

.card-28__blue {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #0d3b8c;
  background-image: linear-gradient(rgba(255,255,255,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size: 22px 22px;
  color: #cfe0ff;
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  clip-path: circle(0% at 100% 0%);
  transition: clip-path 0.6s cubic-bezier(0.65,0,0.35,1);
}

.card-28__card:hover .card-28__blue {
  clip-path: circle(150% at 100% 0%);
}

.card-28__card:hover .card-28__product {
  opacity: 0;
}

.card-28__draw {
  width: 130px;
  height: 130px;
  margin: 1rem auto;
  border: 1.5px solid #9dc0ff;
  border-radius: 50% 50% 50% 12px;
  position: relative;
}

.card-28__draw::before,
.card-28__draw::after {
  content: "";
  position: absolute;
  background: #6f9aff;
}

.card-28__draw::before {
  left: -30px;
  right: -30px;
  top: 50%;
  height: 1px;
  background: repeating-linear-gradient(90deg, #6f9aff 0 6px, transparent 6px 10px);
}

.card-28__draw::after {
  top: -30px;
  bottom: -30px;
  left: 50%;
  width: 1px;
  background: repeating-linear-gradient(0deg, #6f9aff 0 6px, transparent 6px 10px);
}

.card-28__meta {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
}

.card-28__title-p {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
}

.card-28__title-b {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.05;
}

.card-28__specs {
  font-size: 0.74rem;
  line-height: 1.7;
  color: #aecaff;
}

@media (prefers-reduced-motion: reduce) {
  .card-28__product,
    .card-28__blue {
    transition: none !important;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Card Hover Effect from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Blueprint Reveal
Source: https://codefronts.com/motion/css-card-hover-effects/blueprint-reveal/

A product card where a circular wipe transforms the finished object into a technical blueprint drawing with dimension lines and specs. Great for design, manufacturing, architecture, and engineering brands that want to show the craft behind the product.
## HTML
```html
<div class="card-28">
  <article class="card-28__card">
    <div class="card-28__product">
      <span class="card-28__meta" style="color:#5a6a7d;">MODEL · ARC-01</span>
      <div class="card-28__shape"></div>
      <div>
        <h2 class="card-28__title-p">Arc Pendant</h2>
        <p style="font-size:0.82rem;color:#5a6a7d;line-height:1.6;margin-top:0.4rem;">Hand-blown matte ceramic lamp.</p>
      </div>
    </div>
    <div class="card-28__blue">
      <span class="card-28__meta">DRAWING № 01 — REV C</span>
      <div class="card-28__draw"></div>
      <div>
        <h2 class="card-28__title-b">Arc Pendant<br>Cross-Section</h2>
        <p class="card-28__specs">Ø 130mm · cord 1.8m<br>E27 · 2700K · matte glaze<br>TOL ±0.5mm</p>
      </div>
    </div>
  </article>
</div>
```
## CSS
```css
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;700&family=Spline+Sans+Mono:wght@400;500&display=swap');

.card-28,
.card-28 *,
.card-28 *::before,
.card-28 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.card-28 {
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #e9ebee;
  font-family: 'Spline Sans Mono', monospace;
  padding: 2rem;
}

.card-28__card {
  position: relative;
  width: 340px;
  height: 440px;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  background: #fdfdfb;
  border: 1px solid #d4d8de;
  box-shadow: 0 16px 36px rgba(30,50,80,0.15);
}

.card-28__product {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.4rem;
  color: #1a2533;
  background: radial-gradient(circle at 70% 20%, #f0f3f7, #fdfdfb 60%);
  transition: opacity 0.5s ease;
}

.card-28__shape {
  width: 130px;
  height: 130px;
  margin: 1rem auto;
  border-radius: 50% 50% 50% 12px;
  background: linear-gradient(145deg, #2d6cdf, #16306b);
  box-shadow: 0 14px 30px rgba(40,80,160,0.35);
}

.card-28__blue {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #0d3b8c;
  background-image: linear-gradient(rgba(255,255,255,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size: 22px 22px;
  color: #cfe0ff;
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  clip-path: circle(0% at 100% 0%);
  transition: clip-path 0.6s cubic-bezier(0.65,0,0.35,1);
}

.card-28__card:hover .card-28__blue {
  clip-path: circle(150% at 100% 0%);
}

.card-28__card:hover .card-28__product {
  opacity: 0;
}

.card-28__draw {
  width: 130px;
  height: 130px;
  margin: 1rem auto;
  border: 1.5px solid #9dc0ff;
  border-radius: 50% 50% 50% 12px;
  position: relative;
}

.card-28__draw::before,
.card-28__draw::after {
  content: "";
  position: absolute;
  background: #6f9aff;
}

.card-28__draw::before {
  left: -30px;
  right: -30px;
  top: 50%;
  height: 1px;
  background: repeating-linear-gradient(90deg, #6f9aff 0 6px, transparent 6px 10px);
}

.card-28__draw::after {
  top: -30px;
  bottom: -30px;
  left: 50%;
  width: 1px;
  background: repeating-linear-gradient(0deg, #6f9aff 0 6px, transparent 6px 10px);
}

.card-28__meta {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
}

.card-28__title-p {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
}

.card-28__title-b {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.05;
}

.card-28__specs {
  font-size: 0.74rem;
  line-height: 1.7;
  color: #aecaff;
}

@media (prefers-reduced-motion: reduce) {
  .card-28__product,
    .card-28__blue {
    transition: none !important;
  }
}
```

How this works

The card at rest is a plain surface — a title, maybe a badge. On :hover, a pseudo-element reveals a blueprint-style overlay: technical annotations (dashed lines, measurement callouts, coordinate labels) that fade in and slide across the card face.

The overlay uses stroke-dasharray animations on inline SVG lines so each measurement callout “draws itself in” sequentially. The result reads as a designer's schematic revealing the card's structure.

Cascade timing between annotations makes the reveal read as sequential drawing rather than a synchronous appearance — the first callout completes before the second starts.

Make it yours

  • Rebrand the blueprint colour from --blueprint on .card-28 — traditional cyan reads as architect's blueprint; amber gives a sepia patent-drawing feel.
  • Add or remove callouts — the effect scales from 3 to 10+ annotations without breaking.
  • Change the reveal order and speed via each SVG's stroke-dashoffset animation duration and delay.
  • Add a matching graph-paper grid via a repeating linear-gradient background under the callouts.
  • Switch overlay tone to schematic-red for a plans-in-review look.

Gotchas — read before shipping

  • Sequential animations must be short enough that the whole reveal completes within 1-2 seconds — long reveals frustrate users who want to scan and move on.
  • Under prefers-reduced-motion, skip the stroke-dasharray drawings and reveal the overlay via opacity fade.
  • Ensure each SVG element has aria-hidden="true" — screen readers should not announce technical annotations.
  • Test the overlay's contrast against the card face — thin blueprint lines can fail 3:1 non-text contrast.
  • Keep the reveal cascade under 200ms per callout — longer cascades read as slow rather than luxurious.

Browser support

ChromeSafariFirefoxEdge
36+9+16+36+

SVG, stroke-dasharray, keyframes, and transitions are universally supported. Consistent across Chromium, WebKit and Gecko.

Techniques used in this demo

clip-pathMDN ↗radial-gradient()MDN ↗place-items / place-contentMDN ↗box-shadowMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →