From the course: CSS: Advanced Layouts with Grid

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Overview of image-based card markup

Overview of image-based card markup - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

Overview of image-based card markup

“

- [Intstructor] In this next example, we'll take what we learned building a text-based card layout to create an image gallery that uses figures and figcaptions and has some fancy interactive effects. We'll do all of this using Grid. In the exercise files for this movie you'll find HTML and CSS that looks very similar to what we've been working with so far. In the HTML we have a main, the class main area, a ul, the class cards and inside that ul we have all the cards. They each sit in list item with a class card item. That list item contains anchor, then figure with a class card. And inside this figure, we have image and the figcaption. In the style sheet, I've already set up the styles for the grid layout for the entire page because that's no different from what we've worked with in the previous movie. This is just a standard two column grid for medium screens and four column grid for widescreens. Right now, this is what it looks like in the browser. Each figure is it's own card, and…

Contents