Answers for "text on top of the image using grid"

text on top of the image using grid

.container {
  display: grid;
  max-width: 700px;
}

img {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
}

.caption {
  font-family: sans-serif;
  padding-left: 1em;
  line-height: .9em;
  background: rgba(0, 0, 0, .3);
  color: #fff;
  height: 90px;
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
}