33 Tailwind CSS Card Hover Effects
32 / 33

All 33 in 33 Tailwind CSS Card Hover Effects

  1. 01Tailwind 3D Tilt & Parallax Card with Depth Layers
  2. 02Tailwind Glowing Gradient & Glassmorphic Border Card
  3. 03Tailwind Image Zoom Card with Slide-Up Content Reveal
  4. 04Tailwind 3D Flip Card (Front to Back) with backface-visibility
  5. 05Tailwind Sibling De-emphasis Pricing Grid with has-hover
  6. 06Tailwind Minimalist Elevation Card with Layered Dynamic Shadows
  7. 07Tailwind Elastic Lift Card with Spring Cubic-Bezier
  8. 08Tailwind Animated Conic Gradient Border Card with @property
  9. 09Tailwind Stacked Layer Reveal Card (Fanned Risograph Deck)
  10. 10Tailwind Holographic Foil Shimmer Card with mix-blend-mode
  11. 11Tailwind Curtain Reveal Card (Parting Velvet Halves)
  12. 12Tailwind Corner Peel Card with clip-path Triangles
  13. 13Tailwind Neon Sign Card with Layered Text-Shadow Glow
  14. 14Tailwind CRT Scanline Terminal Card with Sweeping Beam
  15. 15Tailwind Depth Parallax Landscape Card with Layer Multipliers
  16. 16Tailwind Cursor Spotlight Card with Masked Border Highlight
  17. 17Tailwind 3D Tilt Product Card with Specular Glare
  18. 18Tailwind Slide-Up Panel Card with Peek Header Swap
  19. 19Tailwind Credit Card Flip with Magnetic Strip & CVV
  20. 20Tailwind RGB Channel-Split Glitch Card
  21. 21Tailwind Rotating Conic Aura Card with Blurred Gradient Bloom
  22. 22Tailwind Blob-to-Rectangle Border Morph Card
  23. 23Tailwind Magnetic Float Orb Card with Pointer Attraction
  24. 24Tailwind Typewriter Reveal Card with Steps Animation & Caret
  25. 25Tailwind Magazine Overlay Slide Card (Full-Face Panel Takeover)
  26. 26Tailwind Breathing Film Grain Card with SVG Turbulence Noise
  27. 27Tailwind Frosted Glass Intensify Card with Deepening Backdrop Blur
  28. 28Tailwind Blueprint Reveal Card with Circular clip-path Wipe
  29. 29Tailwind Cursor-Anchored Shockwave Ripple Card
  30. 30Tailwind Color-Burn Ignition Card with Grayscale-to-Fire Hover
  31. 31Tailwind Prismatic Light Sweep Card with Screen Blend Bar
  32. 32Tailwind Book Cover Open Card with Hinged 3D Rotation
  33. 33Tailwind Drifting Aurora Ribbons Card with Blurred Gradient Bands
Pure TailwindMIT licensed

Tailwind Book Cover Open Card with Hinged 3D Rotation

A hard cover that swings open on a left hinge to reveal the first page inside. The hinge is the whole demo: origin-left plus a 145° rotateY, with a shadow that flips sides as the cover passes vertical.

Live Demo
Plain CSSTailwind v4
Try it

Untitled UI Pro: 5,000+ React + Tailwind CSS v4 components · from $349 one-time

Untitled UI React · Affiliate link

Get Untitled UI Pro

The code

<section class="tch-32 w-full min-h-svh grid place-items-center bg-tch32-bg bg-[radial-gradient(circle_at_50%_40%,#3a2e22,#1a130d)] font-tch32-sans p-8 [perspective:1600px]">
  <article tabindex="0" class="group relative w-[300px] h-[420px] cursor-pointer outline-none transform-3d">
    <div class="absolute inset-0 rounded-[4px_8px_8px_4px] bg-tch32-page p-[2.4rem_2rem_2.4rem_2.6rem] flex flex-col text-tch32-pink shadow-[inset_18px_0_30px_-18px_rgb(0_0_0/0.4)]">
      <span class="font-tch32-display text-[0.8rem] tracking-[0.2em] uppercase text-tch32-gilt mb-4">Chapter One</span>
      <h2 class="font-tch32-display text-[1.9rem] leading-[1.15] mb-4">The House<br>on Linden Row</h2>
      <p class="text-base leading-[1.65] italic text-tch32-pmut">"I had not meant to stay the winter. But the house, you understand, had other plans..."</p>
      <span class="mt-auto text-center text-[0.85rem] text-tch32-gilt">— 1 —</span>
    </div>
    <div class="absolute inset-0 z-2 rounded-[4px_8px_8px_4px] transform-3d origin-left shadow-[6px_6px_24px_rgb(0_0_0/0.5)] transition-[transform,box-shadow] duration-900 ease-[cubic-bezier(0.65,0,0.35,1)] group-hover:rotate-y-[-145deg] group-hover:shadow-[-10px_6px_30px_rgb(0_0_0/0.4)] group-focus-visible:rotate-y-[-145deg] motion-reduce:transition-opacity motion-reduce:duration-300 motion-reduce:group-hover:rotate-y-0 motion-reduce:group-hover:opacity-0">
      <div class="absolute inset-0 rounded-[4px_8px_8px_4px] backface-hidden border-l-6 border-l-tch32-spine bg-[linear-gradient(160deg,#6b2737,#401520)] p-[2.6rem_2rem] flex flex-col justify-between text-tch32-cink">
        <span class="font-tch32-display text-[0.72rem] tracking-[0.25em] uppercase text-tch32-gilt">Harrow &amp; Quill</span>
        <div>
          <h1 class="font-tch32-display text-[2.6rem] leading-[1.05]">The House<br>on Linden<br>Row</h1>
          <div class="w-[50px] h-0.5 bg-tch32-gilt my-3"></div>
          <span class="italic text-[1.05rem] text-tch32-cmut">by E. Marlowe</span>
        </div>
      </div>
      <div class="absolute inset-0 rounded-[4px_8px_8px_4px] backface-hidden rotate-y-180 bg-tch32-cback shadow-[inset_0_0_40px_rgb(0_0_0/0.4)]"></div>
    </div>
  </article>
</section>
@import "tailwindcss";

@theme {
  --color-tch32-bg: #2a2018;
  --color-tch32-bg: oklch(0.28 0.02 65);
  --color-tch32-page: #f5efe0;
  --color-tch32-page: oklch(0.95 0.02 85);
  --color-tch32-pink: #3a2e1f;
  --color-tch32-pink: oklch(0.3 0.02 70);
  --color-tch32-pmut: #5a4a36;
  --color-tch32-pmut: oklch(0.42 0.03 70);
  --color-tch32-gilt: #9a7b4f;
  --color-tch32-gilt: oklch(0.58 0.06 70);
  --color-tch32-cink: #e8d8b8;
  --color-tch32-cink: oklch(0.89 0.04 80);
  --color-tch32-cmut: #d8c3a0;
  --color-tch32-cmut: oklch(0.83 0.05 80);
  --color-tch32-cback: #5a1f2c;
  --color-tch32-cback: oklch(0.34 0.1 15);
  --color-tch32-spine: #2e0f17;
  --color-tch32-spine: oklch(0.22 0.07 15);
  --font-tch32-sans: 'EB Garamond', Georgia, serif;
  --font-tch32-display: 'Marcellus', Georgia, serif;
}

.tch-32 {
  width: 100%;
  min-height: 100svh;
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-tch32-bg: #2a2018;
  --color-tch32-bg: oklch(0.28 0.02 65);
  --color-tch32-page: #f5efe0;
  --color-tch32-page: oklch(0.95 0.02 85);
  --color-tch32-pink: #3a2e1f;
  --color-tch32-pink: oklch(0.3 0.02 70);
  --color-tch32-pmut: #5a4a36;
  --color-tch32-pmut: oklch(0.42 0.03 70);
  --color-tch32-gilt: #9a7b4f;
  --color-tch32-gilt: oklch(0.58 0.06 70);
  --color-tch32-cink: #e8d8b8;
  --color-tch32-cink: oklch(0.89 0.04 80);
  --color-tch32-cmut: #d8c3a0;
  --color-tch32-cmut: oklch(0.83 0.05 80);
  --color-tch32-cback: #5a1f2c;
  --color-tch32-cback: oklch(0.34 0.1 15);
  --color-tch32-spine: #2e0f17;
  --color-tch32-spine: oklch(0.22 0.07 15);
  --font-tch32-sans: 'EB Garamond', Georgia, serif;
  --font-tch32-display: 'Marcellus', Georgia, serif;
}

.tch-32 {
  width: 100%;
  min-height: 100svh;
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Marcellus&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • origin-left is the one utility that turns a flip into a hinge, and it is the difference between this demo and demo 04 — same rotation, different pivot, entirely different object.
  • The gilt rule, the spine border and the gutter shadow are all one utility each. Small physical cues like these are where utilities read better than CSS: they sit next to the element they describe.
  • UI change from the CSS original: focusable card that opens on group-focus-visible:, a reduced-motion cross-fade to the page, and the cover's back face shadow moved inline so the board reads as bound board rather than flat colour.
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 demo 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: Tailwind Book Cover Open Card with Hinged 3D Rotation
Source: https://codefronts.com/motion/tailwind-css-card-hover-effects/tailwind-book-cover-open-card/

A hard cover that swings open on a left hinge to reveal the first page inside. The hinge is the whole demo: origin-left plus a 145° rotateY, with a shadow that flips sides as the cover passes vertical.
## HTML
```html
<section class="tch-32 w-full min-h-svh grid place-items-center bg-tch32-bg bg-[radial-gradient(circle_at_50%_40%,#3a2e22,#1a130d)] font-tch32-sans p-8 [perspective:1600px]">
  <article tabindex="0" class="group relative w-[300px] h-[420px] cursor-pointer outline-none transform-3d">
    <div class="absolute inset-0 rounded-[4px_8px_8px_4px] bg-tch32-page p-[2.4rem_2rem_2.4rem_2.6rem] flex flex-col text-tch32-pink shadow-[inset_18px_0_30px_-18px_rgb(0_0_0/0.4)]">
      <span class="font-tch32-display text-[0.8rem] tracking-[0.2em] uppercase text-tch32-gilt mb-4">Chapter One</span>
      <h2 class="font-tch32-display text-[1.9rem] leading-[1.15] mb-4">The House<br>on Linden Row</h2>
      <p class="text-base leading-[1.65] italic text-tch32-pmut">"I had not meant to stay the winter. But the house, you understand, had other plans..."</p>
      <span class="mt-auto text-center text-[0.85rem] text-tch32-gilt">— 1 —</span>
    </div>
    <div class="absolute inset-0 z-2 rounded-[4px_8px_8px_4px] transform-3d origin-left shadow-[6px_6px_24px_rgb(0_0_0/0.5)] transition-[transform,box-shadow] duration-900 ease-[cubic-bezier(0.65,0,0.35,1)] group-hover:rotate-y-[-145deg] group-hover:shadow-[-10px_6px_30px_rgb(0_0_0/0.4)] group-focus-visible:rotate-y-[-145deg] motion-reduce:transition-opacity motion-reduce:duration-300 motion-reduce:group-hover:rotate-y-0 motion-reduce:group-hover:opacity-0">
      <div class="absolute inset-0 rounded-[4px_8px_8px_4px] backface-hidden border-l-6 border-l-tch32-spine bg-[linear-gradient(160deg,#6b2737,#401520)] p-[2.6rem_2rem] flex flex-col justify-between text-tch32-cink">
        <span class="font-tch32-display text-[0.72rem] tracking-[0.25em] uppercase text-tch32-gilt">Harrow &amp; Quill</span>
        <div>
          <h1 class="font-tch32-display text-[2.6rem] leading-[1.05]">The House<br>on Linden<br>Row</h1>
          <div class="w-[50px] h-0.5 bg-tch32-gilt my-3"></div>
          <span class="italic text-[1.05rem] text-tch32-cmut">by E. Marlowe</span>
        </div>
      </div>
      <div class="absolute inset-0 rounded-[4px_8px_8px_4px] backface-hidden rotate-y-180 bg-tch32-cback shadow-[inset_0_0_40px_rgb(0_0_0/0.4)]"></div>
    </div>
  </article>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tch32-bg: #2a2018;
  --color-tch32-bg: oklch(0.28 0.02 65);
  --color-tch32-page: #f5efe0;
  --color-tch32-page: oklch(0.95 0.02 85);
  --color-tch32-pink: #3a2e1f;
  --color-tch32-pink: oklch(0.3 0.02 70);
  --color-tch32-pmut: #5a4a36;
  --color-tch32-pmut: oklch(0.42 0.03 70);
  --color-tch32-gilt: #9a7b4f;
  --color-tch32-gilt: oklch(0.58 0.06 70);
  --color-tch32-cink: #e8d8b8;
  --color-tch32-cink: oklch(0.89 0.04 80);
  --color-tch32-cmut: #d8c3a0;
  --color-tch32-cmut: oklch(0.83 0.05 80);
  --color-tch32-cback: #5a1f2c;
  --color-tch32-cback: oklch(0.34 0.1 15);
  --color-tch32-spine: #2e0f17;
  --color-tch32-spine: oklch(0.22 0.07 15);
  --font-tch32-sans: 'EB Garamond', Georgia, serif;
  --font-tch32-display: 'Marcellus', Georgia, serif;
}

.tch-32 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

145°, not 180°. A fully flipped cover lies flat and disappears edge-on. Stopping at 145° leaves it visibly standing open at an angle, which is what a real book does and what makes the depth legible.

The cover is a two-faced object. Front (title, author, publisher) and back (plain board, inset shadow), both backface-hidden inside a transform-3d cover element. Without the back face you see through the cover to the page as it turns.

The page is always there. The inner spread sits underneath at rest, fully rendered — no lazy mount, so the first hover never reveals an empty book.

Make it yours

  • Hinge side: origin-right plus a positive rotation for a right-hand binding.
  • Swing: -145deg is a wide open; -120deg is a peek.
  • Cover palette: --color-tch32-cover-* — oxblood and gilt here, but navy and silver works identically.

Gotchas — read before shipping

  • [perspective:1600px] on the stage, not on the cover.
  • backface-hidden on both cover faces, and transform-3d on the cover itself, or the two faces flatten together.
  • Leave horizontal room in a grid — an open cover occupies roughly double the card's width.
  • Under motion-reduce: cross-fade to the page rather than swinging a 300px board across the layout.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

3D transforms, transform-origin and backface-visibility are universally supported; rotate-y-* and transform-3d need Tailwind v4.

Techniques used in this demo

Utilitiesfirst-class utility or variant

perspectivetw ↗transform origintw ↗backface visibilitytw ↗:focus-withintw ↗prefers-reduced-motiontw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →