CSS Grid and Flexbox, v2

Flexbox – Figure Caption & Figure Caption with Flexbox

CSS Grid & Flexbox Course Videos ▶️ 

Figure Caption & Figure Caption with Flexbox

Chapter 3: figure and figcaption

Starting CodePen

Ending CodePen

Flexbox may be applied to as many elements in the document as you wish. Remember to always manage parents (flex containers) and children (flex items) appropriately.

In this case, if we declare display: flex on the figure, then the caption may be placed next to the image (row) or underneath it (column) very easily.

Use relative and absolute positioning to move the caption onto the image. Change the color to include some transparency, or use the opacity property to manipulate the transparency.

Changed CSS:

figure {
  display: flex;
  flex-flow: column nowrap;
  position: relative;
}
figcaption {
  position: absolute;
  bottom: 0%;
  width: 100%;
  opacity: 0.7;
}