ImagesLesson 69Free preview

Image Overlay Title

This lesson is part of How To · All levels

Summary

Image overlay title adds a title bar at the bottom of the image so that the context of the photo is immediately visible. The headline is usually placed above a dark gradient to keep it readable in a bright photo. This pattern is suitable for article cards, tourist galleries, or property catalogs.

Key points

The image container uses position: relative.
The title bar is positioned absolute at the bottom with left, right, and bottom zero.
The dark gradient gives contrast without covering the entire picture.
Figcaption can be used as a semantic title element.
The larger upper padding gives room for gradient effects.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.