Figure Caption & Figure Caption with CSS Grid

Chapter 11: <figure> and <figcaption> with Grid

In the Flexbox unit, we used relative and absolute positioning to overlap the captions on the images.

However, we can also use Grid to do this... and it's much easier.

Starting CodePen

Finished CodePen

Bonus: Combining Grid Cells and Animation

View the CodePen

Here we have two figures occupying the same grid cell.

We can animate the top photo to fade in and out, revealing the photo underneath.

What else could you do with overlapping CSS grid cells?