CSS card hover reveal animation | HTML, CSS & JavaScript

<div class="scene">
    <div class="card blue">
      <div class="card-inner">
        <div class="image-box">
          <img src="https://picsum.photos/id/101/400/300" alt="Ocean">
        </div>
        <div class="reveal-content">
          <div class="inner-text">
            <h3>Ocean Blue</h3>
            <p>The deep sea color palette with 3D tilting effects.</p>
          </div>
        </div>
      </div>
    </div>
  
    <div class="card purple">
      <div class="card-inner">
        <div class="image-box">
          <img src="https://picsum.photos/id/102/400/300" alt="Mountain">
        </div>
        <div class="reveal-content">
          <div class="inner-text">
            <h3>Royal Purple</h3>
            <p>A sophisticated blend for modern luxury interfaces.</p>
          </div>
        </div>
      </div>
    </div>
  
    <div class="card orange">
      <div class="card-inner">
        <div class="image-box">
          <img src="https://picsum.photos/id/103/400/300" alt="Desert">
        </div>
        <div class="reveal-content">
          <div class="inner-text">
            <h3>Sunset Glow</h3>
            <p>Warm tones that expand smoothly on interaction.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

body {
    background-color: #121212;
}
/* Color Combinations */
.blue   { --primary: #00d2ff; --secondary: #3a7bd5; }
.purple { --primary: #9d50bb; --secondary: #6e48aa; }
.orange { --primary: #ff9966; --secondary: #ff5e62; }

.scene {
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: flex-start; /* Crucial: prevents other cards from growing */
  perspective: 1000px;
  padding: 100px 20px;
  background-color: #121212;
}

.card {
  width: 300px;
  transition: transform 0.4s ease;
}

.card-inner {
  background: #1e1e1e;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
  border: 1px solid rgba(255,255,255,0.1);
}

.image-box img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}

/* --- The Reveal Magic --- */
.reveal-content {
  display: grid;
  grid-template-rows: 0fr; /* Zero height blank box fix */
  transition: grid-template-rows 0.4s ease;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}

.inner-text {
  overflow: hidden; /* Important for 0fr logic */
  padding: 0 20px;
  color: white;
  font-family: sans-serif;
}

/* --- 3D Hover Interactions --- */
.card:hover {
  transform: rotateX(10deg) rotateY(-5deg) 
             translateY(-10px);
  z-index: 10;
}

.card:hover .reveal-content {
  grid-template-rows: 1fr;
}

.card:hover .inner-text {
  padding: 20px; 
}

.card:hover .card-inner {
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
  border-color: var(--primary);
}

/* Text styles */
h3 { margin: 0 0 10px 0; font-size: 1rem; }
p { margin: 0; font-size: 0.7rem; opacity: 0.9; line-height: 1.4; }

- CSS card hover reveal animation

Live Preview