Как поместить текст поверх изображения?

Question

У меня есть настройки HTML и CSS для простой галереи изображений. Я пытался добавить белый текст поверх каждого изображения в центре.

Ссылка на HTML + CSS: https://jsfiddle.net/babis95/zdhne95u/

.section-images 
{
  padding: 0; 
}
.images-showcase 
{
  list-style: none; 
  width: 100%; 
}
.images-showcase li 
{
  display: block;
  float: left; 
  width: 25%; 
}
.destination-photo 
{
    width: 100%; 
    margin: 0; 
    overflow: hidden; 
    background-color: #000; 
}
.destination-photo img 
{
  opacity: 0.7; 
  width: 100%; 
  height: auto; 
  transform: scale(1.15);
  transition: transform 0.5s, opacity 0.5s; 
}
.destination-photo img:hover 
{
  opacity: 1;
  transform: scale(1.03);
}
.section-images p
{
  color: white;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<section class='section-images'>
    <ul class='images-showcase'>
      <li>
        <figure class='destination-photo'>
          <img src='https://image.shutterstock.com/image-photo/blue-suitcase-sun-glasses-hat-600w-1094945555.jpg' alt='Image 1'>
          <p>IMAGE TEXT 1</p>
        </figure>
      </li>
      <li>
        <figure class='destination-photo'>
          <img src='https://image.shutterstock.com/image-photo/overhead-view-travelers-accessories-essential-600w-425996818.jpg' alt='Image 2'>
        </figure>
      </li>
      <li>
        <figure class='destination-photo'>
          <img src='https://image.shutterstock.com/image-photo/woman-traveler-suitcase-on-color-600w-578891674.jpg' alt='Image 3'>
        </figure>
      </li>
    </ul>
</section>

Я исследовал различные способы, но, похоже, ни один из них не работает с ними так, как я настроил свой код:

.section-images p
{
  color: white;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

все, что это делает, добавляет текст в середине всего контейнера и перемещает изображения за пределы выравнивания. Этот код работает с одним изображением в div, но не при использовании нескольких изображений.

Answer 1

Вам просто нужно position: relative; на вашем .destination-photo

Ваш текст находится на абсолютной позиции. Поскольку у вас нет относительной позиции, изображения размещаются абсолютно в документе. Добавление position: relative к изображению дало бы тегам p позицию для начала.