Stage 3: The Dancer Images

UNIT

STEP 1

How Images Work Inside Cards

Right now each card is a solid dark box with a dance name at the bottom. In this stage you will add an illustrated dancer image inside each card. Because the images are PNGs with transparent backgrounds, the card's own dark color will show through wherever the illustration has no content, creating a clean, layered look.

The image needs to fill the card completely and sit behind the dance name label. To do this, you will position the image absolutely inside the card. The card already has position: relative, which makes it the reference point for anything positioned absolutely inside it.

Why object-fit: contain?

In Unit 06 you used object-fit: cover to fill a box by cropping a photo. These dancer images are illustrations with transparent backgrounds, cropping them would cut off feet or headdresses. object-fit: contain shows the full illustration, scaled to fit, without cropping anything.

STEP 2

Update the Card CSS

Find the .card-label rule in your CSS and replace it with this updated version, then add the new .dancer-card img rule directly below it:

👉 Replace .card-label and add .dancer-card img below it: .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;
}

STEP 3

Add an Image to Each Card

Inside each .dancer-card, add an <img> tag before the <span>. The image path uses ../../assets/images/ to navigate two folders up from unit-10/ to the project root, then into the assets folder. Here are all six, add the matching <img> to each card:

👉 Jingle Dress card, add img before the span: <div class="dancer-card">
<img src="../../assets/images/womensJingle.png" alt="Jingle Dress dancer">
<span class="card-label">Jingle Dress</span>
</div>

👉 Fancy Shawl card: <img src="../../assets/images/womensFancy.png" alt="Fancy Shawl dancer">

👉 Women's Traditional card: <img src="../../assets/images/womensTraditional.png" alt="Women's Traditional dancer">

👉 Grass Dance card: <img src="../../assets/images/mensGrass.png" alt="Grass Dance dancer">

👉 Men's Traditional card: <img src="../../assets/images/mensTraditional.png" alt="Men's Traditional dancer">

👉 Men's Fancy card: <img src="../../assets/images/mensFancy.png" alt="Men's Fancy dancer">

STEP 4

Why These Styles?

position: absolute on .dancer-card img, removes the image from normal document flow and positions it relative to the nearest positioned ancestor, which is the card. It fills the entire card area without pushing the label out of position.
object-fit: contain, scales the illustration to fill as much of the card as possible without cropping. The full dancer figure stays visible, which matters for regalia, cutting off a headdress or moccasins would lose important detail.
object-position: center bottom, anchors the contained image to the bottom center of the card. The dancer's feet sit at the card's base, which feels natural and grounds the figure visually.
position: relative; z-index: 1 on .card-label, ensures the dance name text appears above the absolutely positioned image. Without this, the label would be hidden behind the image.
background: linear-gradient(...) on .card-label, fades from the card's dark indigo at the bottom to transparent at the top. This creates a readable area for the text without a hard-edged box, so the label blends naturally into the illustration above it.

Stage 3 Complete!

Your grid now shows the six dancer illustrations inside their cards with the dance name readable at the bottom. In Stage 4 you will add the hover effects: the card lifts, the image scales up slightly, and a gold tint overlay fades in when a visitor moves their mouse over a card.

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;
    }

</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">
        <span class="card-label">Jingle Dress</span>
      </div>

<div class="dancer-card">
        <span class="card-label">Fancy Shawl</span>
      </div>

<div class="dancer-card">
        <span class="card-label">Women's Traditional</span>
      </div>

<div class="dancer-card">
        <span class="card-label">Grass Dance</span>
      </div>

<div class="dancer-card">
        <span class="card-label">Men's Traditional</span>
      </div>

<div class="dancer-card">
        <span class="card-label">Men's Fancy</span>
      </div>

</div>
  </section>

</body>
</html>

Live Preview