Stage 4: Hover Effects

UNIT

STEP 1

Three Layers of Hover

The hover effect you are about to build has three parts working together. Each one adds a different quality to the interaction:

The card lifts, transform: translateY(-6px) moves the card 6 pixels upward, creating the illusion it is rising off the page. A warm gold box shadow fades in beneath it.
The image scales, transform: scale(1.06) makes the dancer illustration grow slightly. Since the card has overflow: hidden, the edges clip and it looks like the image is zooming in from within the card.
A gold overlay fades in, a ::before pseudo-element sits over the card as an invisible gold tint. On hover, its opacity transitions from 0 to 1, washing the card in a warm glow.

Hover over the right card below to see all three working at once:

No hover

Hover me

STEP 2

Add the Card Hover CSS

Find the .dancer-card rule and add transition to it. Then add the five new rules below it, all just above </style>:

👉 Update .dancer-card, add transition to the existing rule: .dancer-card {
/* ... existing properties ... */
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

👉 Add these five rules just above </style>: .dancer-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(212, 168, 83, 0.25);
}

.dancer-card img {
  /* ... existing properties ... */
  transition: transform 0.4s ease;
}

.dancer-card:hover img {
  transform: scale(1.06);
}

.dancer-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(212, 168, 83, 0.12);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.dancer-card:hover::before {
  opacity: 1;
}

Also update .card-label, change its z-index from 1 to 2 so it stays above the new ::before overlay:

👉 Update z-index in .card-label: .card-label {
/* ... existing properties ... */
z-index: 2;
}

STEP 3

Why These Styles?

transition: transform 0.3s ease, box-shadow 0.3s ease on .dancer-card, tells the browser to animate both the lift and the shadow over 300 milliseconds with an ease curve. Without this, both changes would snap instantly on hover.
transform: translateY(-6px) on hover, moves the card upward by 6 pixels. The movement is purely visual and does not affect the layout of other elements around it.
box-shadow: 0 16px 48px rgba(212, 168, 83, 0.25), a large soft shadow in a warm gold tone. The 0 horizontal offset centers it. 16px vertical offset pushes it down. 48px blur spreads it wide. 0.25 opacity keeps it subtle.
transform: scale(1.06) on hover image, scales the image to 106% of its size. The overflow: hidden on the card clips the excess, so the image appears to zoom in from within the card frame.
::before pseudo-element, creates a generated element that acts as an invisible overlay layer. It occupies the full card area via inset: 0 (a shorthand for setting all four sides to 0). At opacity: 0 it is invisible; at opacity: 1 on hover it becomes a warm gold tint.
z-index: 2 on .card-label, keeps the dance name readable above the ::before overlay, which sits at z-index: 1.

Stage 4 Complete!

Your cards now respond to hover with a lift, a zoom, and a gold glow. In Stage 5 you will build the modal, the popout window that will appear when a visitor clicks a card. The modal is all HTML and CSS in this stage. JavaScript comes in Stage 6.

Code Editor

<!DOCTYPE html>
<html>
<head>
  <title>Dancing in Step</title>
  <style>

* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

body {
      font-family: Georgia, serif;
      background: #faf8f5;
      color: #1a1a1a;
    }

#hero {
      background: #1a1237;
      color: white;
      padding: 80px 40px;
    }

#hero h1 {
      font-size: 3rem;
      margin-bottom: 8px;
      letter-spacing: -0.02em;
    }

#hero .tagline {
      font-size: 1.125rem;
      color: rgba(255, 255, 255, 0.65);
      font-style: italic;
      margin-bottom: 32px;
    }

#hero p {
      font-size: 1.0625rem;
      line-height: 1.8;
      max-width: 680px;
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: 28px;
    }

#hero a {
      color: #d4a853;
      font-size: 1rem;
    }

#dancers {
      background: #0f0f1a;
      padding: 80px 40px;
    }

#dancers h2 {
      font-size: 2rem;
      color: white;
      text-align: center;
      margin-bottom: 12px;
    }

#dancers .section-intro {
      font-size: 1rem;
      color: rgba(255, 255, 255, 0.6);
      text-align: center;
      margin-bottom: 48px;
    }

.dancers-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      max-width: 1100px;
      margin: 0 auto;
    }

.dancer-card {
      background: #1a1237;
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
      height: 420px;
      position: relative;
      display: flex;
      align-items: flex-end;
    }

.card-label {
      width: 100%;
      padding: 20px;
      color: white;
      font-size: 1.125rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      position: relative;
      z-index: 1;
      background: linear-gradient(to top, rgba(26, 18, 55, 0.92), transparent);
    }

.dancer-card img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center bottom;
    }

</style>
</head>
<body>

<section id="hero">
    <h1>Dancing in Step</h1>
    <p class="tagline">Powwow regalia and dance traditions of the Lakota, Dakota, and Ojibwe peoples</p>
    <p>Powwow is a gathering. The drum sits at the center of the arena and everything &mdash; the dancers, the families, the songs &mdash; moves around it. For the Lakota, Dakota, and Ojibwe peoples, powwow is a living tradition: a space where culture is practiced, passed forward, and celebrated together.</p>
    <a href="https://americanindian.si.edu" target="_blank">Learn more: Smithsonian National Museum of the American Indian &rarr;</a>
  </section>

<section id="dancers">
    <h2>The Dances</h2>
    <p class="section-intro">Six dance traditions of the Lakota, Dakota, and Ojibwe peoples. Click any dancer to learn more.</p>
    <div class="dancers-grid">

<div class="dancer-card">
        <img src="../../assets/images/womensJingle.png" alt="Jingle Dress dancer">
        <span class="card-label">Jingle Dress</span>
      </div>

<div class="dancer-card">
        <img src="../../assets/images/womensFancy.png" alt="Fancy Shawl dancer">
        <span class="card-label">Fancy Shawl</span>
      </div>

<div class="dancer-card">
        <img src="../../assets/images/womensTraditional.png" alt="Women's Traditional dancer">
        <span class="card-label">Women's Traditional</span>
      </div>

<div class="dancer-card">
        <img src="../../assets/images/mensGrass.png" alt="Grass Dance dancer">
        <span class="card-label">Grass Dance</span>
      </div>

<div class="dancer-card">
        <img src="../../assets/images/mensTraditional.png" alt="Men's Traditional dancer">
        <span class="card-label">Men's Traditional</span>
      </div>

<div class="dancer-card">
        <img src="../../assets/images/mensFancy.png" alt="Men's Fancy dancer">
        <span class="card-label">Men's Fancy</span>
      </div>

</div>
  </section>

</body>
</html>

Live Preview