An image-caption class styles a caption layer that sits over a thumbnail instead of taking up space below it. The thumbnail container uses relative positioning; the caption uses absolute positioning, matching dimensions, and top-left placement. Its dark, slightly transparent background preserves a glimpse of the image while keeping the text readable. section 15.8
Reveal the caption on hover
Give the caption a vertical flex layout, align its contents to the bottom, and hide it with opacity: 0. Then the hover rule changes opacity to 1. Hovering over the thumbnail makes the caption appear with a satisfying little reveal. section 15.8
.image-caption {
display: flex; #1
flex-direction: column; #1
justify-content: flex-end; #1
position: absolute; #2
left: 0; #2
top: 0; #2
width: 300px; #3
height: 200px; #3
background-color: rgba(32, 32, 32, 0.75); #4
color: #ecd078;
opacity: 0; #5
}
Inspect the complete overlay styling, including absolute positioning, dimensions, translucent background, text color, and default opacity. section 15.8
