Как добавить текст поверх изображений столбцов

Question

В настоящее время я пытаюсь добавить текст поверх изображений, что относительно просто, но я столкнулся с проблемой.Я пытаюсь добавить текст поверх изображений, которые я установил, в столбец, и весь текст принудительно накладывается на последнее изображение (столбец размером 3 столбца на 1 строку).

Справка?

Вот код, с которым я работаю:

.column {
  float: left;
  width: 33.33%;
  padding: 0px;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

<div class="row">
  <div class="column">
    <img src="./bin/images/lecture.jpg" alt="sampletext" style="width:100%">
  </div>
  <div class="column">
    <img src="./bin/images/identify.jpg" alt="sampletext" style="width:100%">
  </div>
  <div class="column">
    <img src="./bin/images/roadmap.jpg" alt="sampletext" style="width:100%">
  </div>
</div>

Answer 1

Я попытался расширить и преобразовать ответ @Aryan Twanju в рабочий пример.Пожалуйста, просмотрите его, выполнив приведенный ниже код, и дайте нам знать, если вы ищете его или что-то другое.

.column {
  float: left;
  width: 33.33%;
  padding: 0px;
  position: relative;
  box-sizing: border-box;
  padding: 0 5px;
}

.column .overlay {
  position: absolute;
  text-align: center;
  color: #FFF;
  left: 50%;
  top: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  font-family: Arial;
  font-size: 20px;
  padding: 10px;
  font-weight: bold;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

<div class="row">
  <div class="column">
    <div class="overlay">
      Sample Text 1
    </div>
    <img src="https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="sampletext" style="width:100%">
  </div>
  <div class="column">
    <div class="overlay">
      Sample Text 2
    </div>
    <img src="https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="sampletext" style="width:100%">
  </div>
  <div class="column">
    <div class="overlay">
      Sample Text 3
    </div>
    <img src="https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="sampletext" style="width:100%">
  </div>
</div>

Спасибо, Джинеш Равал

Answer 2

Использование свойств css position: relative и position: absolute может помочь решить вашу проблему.Попробуйте этот код.

<div class="row">
  <div class="column">
    <div class="overlay">
    sample text 1
    </div>
    <img src="./bin/images/lecture.jpg" alt="sampletext" style="width:100%">
  </div>
  <div class="column">
    <div class="overlay">
    sample text 2
    </div>
    <img src="./bin/images/identify.jpg" alt="sampletext" style="width:100%">
  </div>
  <div class="column">
    <div class="overlay">
    sample text 3
    </div>
    <img src="./bin/images/roadmap.jpg" alt="sampletext" style="width:100%">
  </div>
</div>

.column {
  float: left;
  width: 33.33%;
  padding: 0px;
  position: relative;
}
.column .overlay {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}