Unit 3 · Read All About It
Stage 3 of 7
Unit 3 · Read All About It
Stage 3 of 7
Unit 3 · Stage 3
Here is the move that makes a page look designed: putting a headline right on top of the photo. You do it with CSS positioning, the most useful layout trick in web design. (pause on a highlighted word to see what it does)
We added a <div class="hero-text"> inside the hero. To float it over the photo, you use two rules that work as a pair: the container gets position: relative, and the text gets position: absolute.
position: relative.hero, this makes it the anchor. The overlay will be placed against this box.position: absolute.hero-text, this lifts it out of the normal flow so it can sit on top of the image instead of below it.bottom, left, right0, they pin the overlay to the bottom edge, stretched across the full width.Give the hero its anchor, then place the text box over the bottom of the photo with a dark see-through background so white text is readable.
rgba(0, 0, 0, 0.55)0.55 means 55%, so the photo shows through a little.padding.hero { position: relative; }, then a .hero-text rule with position: absolute;, bottom: 0;, left: 0;, right: 0;, background-color: rgba(0, 0, 0, 0.55);, color: #ffffff;, and padding: 24px; then press ▶ Run.Which position value lifts an element out of the flow so it can sit on top of another? Type it, then press Submit to unlock the next steps.
Now make the overlaid headline big and pull the paragraph in close under it.
font-size34px makes the lead headline stand out over the photo.margin0 on the h2 and a small top margin on the paragraph keep the two lines tight together..hero-text h2 (margin: 0;, font-size: 34px;) and .hero-text p (margin: 8px 0 0;) then Run.To complete Stage 3, your .hero-text needs position: absolute and its see-through rgba background. Press Check my work when you are ready. This opens Stage 4 and lets your teacher see that you finished.