ImagesLesson 92Free preview
Portfolio Gallery
This lesson is part of How To · All levels
Summary
The gallery's portfolio displays works in a neat card grid, complete with titles and categories. Each card is usually a link to the project details and has an overlay when hovered. A responsive grid ensures that the gallery remains visible on desktop and mobile.
Key points
- The CSS Grid with auto-fit makes the portfolio card responsive.
- Each project should be linked so that the details can be opened.
- The gradient overlay at the bottom keeps the title legible.
- Object-fit: the cover creates a uniform project image without distortion.
- The light hover effect gives feedback on the cards.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.