Полупрозрачный градиент над картинкой на чистом CSS

Я переделывал страницу мастер-класса AppSync и захотел немного улучшить скучную секцию «Обо мне».

Я насмотрелся на разные сайты и решил сделать что-то такое:

Видите градиент внизу каждой картинки? Из него получается неплохой контрастный фон для подписей, а ещё он хорошо выглядит с любыми фоновыми картинками (как видите, некоторые из них тёмные, а другие очень светлые). Я использовал синтаксис ::before из CSS, чтобы создать пустой псевдоэлемент ::before с фоновым градиентом.

Вот базовый HTML-код для каждой картинки

<figure class="overlay">
  <figcaption class="z-50">...</figcaption>
  <img class="z-0" src="...">
</figure>

Для начала обратите внимание на z-index у тегов <figcaption> и <img>. Значения выбраны так, чтобы <figcaption> появился перед градиентом, а не за ним.

• У тега <figcaption> z-index равен 50 — он на переднем плане.
• У псевдоэлемента ::before z-index принимает любое значение от 1 до 49 и остаётся в середине.
• У тега <img> z-index равен 0 — он позади всех.

А вот так выглядит CSS-атрибуты для псевдоэлемента ::before.

.overlay::before {
  content: '';
  z-index: 10;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 50%);
}

Вы могли заметить пустое значение '' атрибута content. К сожалению, если его не указать, то псевдоэлемент ::before вообще не создаётся. Ширину, высоту и позицию мы задаем, чтобы убедиться, что ::before полностью перекрывает тег <img>.

Тот же результат получается и с помощью дополнительных тегов <div>, но этот способ показался мне очень хорошим, да ещё и на чистом CSS.