ImagesLesson 73Free preview
Image Text
This lesson is part of How To · All levels
Summary
Image text places text directly above the image, usually as a title or call to action. The text is positioned absolutely in the center of the image container and given a dark layer to make the contrast sufficient. This technique is often used on banners, promo cards, and the hero section.
Key points
- The image container should be position: relative as a reference to the position of the text.
- The text uses position: absolute with top and left 50%.
- Transform: translate(-50%, -50%) centers the text right in the middle.
- Dark layers or text shadows improve readability.
- Text size should be responsive to keep it loaded on a small screen.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.