ImagesLesson 74Free preview
Image Text Blocks
This lesson is part of How To · All levels
Summary
Image text blocks place a solid or semi-transparent text box over some of the images. This box provides clear reading space without having to cover the entire picture. The size, position, and color of the box can be adjusted to fit the design.
Key points
- The text box is positioned absolute within the relative image container.
- The alpha background gives the impression of being transparent but still readable.
- Padding creates a comfortable space in the text box.
- Width: min(300px, 70%) limits the width of the box responsively.
- The box-shadow can separate the box from the background.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.