ImagesLesson 63Free preview
Image Gallery
This lesson is part of How To · All levels
Summary
Image gallery displays a collection of photos in a responsive layout complete with caption. The gradient overlay at the bottom keeps the text readable without covering the entire image. Galleries like this are often used for portfolios, event documentation, or product catalogues.
Key points
- The CSS Grid with auto-fit makes the gallery adjust the screen width.
- Figure and figcaption give the image and title a semantic structure.
- The gradient overlay increases the contrast of the text above the photo.
- The hover effect can produce captions or magnify images.
- The alt attribute remains mandatory even though the image has visual captioning.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.