UNIT 3 • STAGE 3 OF 7

Text Overlay

Use position: absolute to float your headline caption over the hero image

🏠 Home Unit 3 ← Stage 2 Stage 4 →
UNIT
STEP 1

The Big Concept: position: absolute

This is one of the most powerful ideas in CSS. position: absolute lets you pull an element out of the normal page flow and place it at an exact location inside its parent container.

This text box is positioned on top of the background using position: absolute

The colored area is the parent (position: relative). The white box is the child (position: absolute).

🗺️ How It Works

When a parent has position: relative, any child with position: absolute uses the parent's top-left corner as its starting point. Then you use top, right, bottom, and left to move it exactly where you want.

STEP 2

Add the Overlay div to HTML

Inside your .image-wrapper, add a new <div class="main-text"> after the <img> tag. This div will sit on top of the image once you add the CSS.

👉 Update your .image-wrapper HTML to look like this: <div class="image-wrapper">
  <img src="https://picsum.photos/seed/native/1000/350"
       alt="Main article image"
       class="main-image">
  <div class="main-text">
    <p>Write your front-page headline caption here. Tell the most important story on your newspaper's front page.</p>
  </div>
</div>
STEP 3

Style the Overlay with position: absolute

Now add the CSS that positions the text box on top of the image. This is the key rule of this entire stage:

👉 Add this rule to your <style> tag: .main-text {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 35%;
  background: rgba(249, 248, 248, 0.85);
  color: #222;
  padding: 15px;
  border-radius: 8px;
  transform: translateY(-50%);
  text-align: left;
  font-size: 14px;
}
.main-text {
  position: absolute;  /* lifts out of flow */
  top: 50%;  /* 50% down the parent */
  right: 20px;  /* 20px from right edge */
  transform: translateY(-50%);  /* truly centers it */
}
  • position: absolute - lifts the element out of normal page flow and makes it overlap the image. The parent (.image-wrapper) must have position: relative - which you set in Stage 2 - so the absolute coordinates are measured from the wrapper's edges, not the whole page.
  • top: 50% - places the top edge of the text box 50% of the way down the parent's height. This is the starting point for vertical centering.
  • right: 20px - anchors the text box 20px from the right edge of the image wrapper. Absolute positioning uses top/right/bottom/left to say how far from each edge of the parent the element should sit.
  • width: 35% - sets the text box to 35% of its parent's width. Percentage widths are relative to the parent, so this always takes up exactly a third of the image width no matter how wide the screen is.
  • background: rgba(249, 248, 248, 0.85) - a nearly-white, slightly transparent fill. The 0.85 opacity lets you faintly see the image through the box, which blends the text into the photo more naturally than a solid opaque background.
  • transform: translateY(-50%) - see the tip box below for why this is needed alongside top: 50%.

📐 Why transform: translateY(-50%)?

top: 50% places the top edge of the box at the 50% mark - which means the box starts at center and extends downward, so it's actually too low. translateY(-50%) then moves the entire box upward by half of its own height. The result: the box's exact center lines up with the 50% mark of the parent. This two-property combination is the standard CSS technique for vertical centering with position: absolute.

STEP 4

Add the Photo Credit

Below the .image-wrapper, you already have a photo credit paragraph. Let's style it to look like a newspaper caption line.

👉 Add this CSS rule: .photo-credit {
  font-size: 13px;
  color: #666;
  text-align: left;
  max-width: 1000px;
  margin: 5px auto;
  padding-left: 5px;
}
  • font-size: 13px - smaller than regular paragraph text. Photo credits are secondary information - they should be visible but not compete with the headline or article content.
  • color: #666 - a medium gray, softer than the main body text. The lighter color reinforces that this is a caption, not content.
  • text-align: left - overrides the text-align: center you set on body. Caption lines in newspapers always run flush-left below the image edge.
  • max-width: 1000px and margin: 5px auto - matches the width and centering of the .main-article above, so the credit line sits neatly below the image rather than spanning the full page.
  • padding-left: 5px - a tiny inset so the credit text isn't flush with the absolute left edge of the article, which would look too tight.
STEP 5

Write Your Headline Story

Replace the placeholder text inside .main-text with a real headline-style caption. What's the biggest story from your Tribal community right now?

  • Buffalo herd restoration
  • Language revitalization program launch
  • Land returned to the Tribe
  • Youth basketball tournament win
  • New Tribal housing development
  • Graduation celebration

Keep it to 2–3 sentences - newspaper captions are short and punchy.

STEP 6

Make It Your Own!

  • Try left: 20px instead of right: 20px - the box moves to the left side
  • Change background: rgba(249, 248, 248, 0.85) - try rgba(0, 0, 0, 0.7) for a dark overlay (change color to white too!)
  • Adjust width: 35% - try 45% for a wider text box
  • Try top: 20px (no transform) to pin the box to the top corner

🌟 Stage 3 Complete!

You just used position: absolute - one of the most important CSS tools. In Stage 4, you'll add the three article cards below the hero section using Flexbox.

Code Editor
Live Preview
Relentless Feather © 2026 Relentless Feather. All rights reserved.