Write Text On Top Of Multiple Images

I have been trying to place multiple images on a HTML and write text in each image I place. I've tried multiple solutions (I only know basic html and css) but none of them actually

Solution 1:

How about wrapping your images with div tag and then using absolute positioning. Something like this:

.images {
    display: inline;
    margin: 0px;
    padding: 0px;
    vertical-align:middle;
    width:200px;
    height: auto;
}
#content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#content div {
    position: relative;
}

h2 {
  position: absolute;
  top: 8px;
  left: 100px;
}

<div id="content">
    <div>
      <h2>Overflow</h2>
      <img src="https://i.imgur.com/JaRX6SL.png" class="images" />
    </div>
    <div>
      <h2>Overflow</h2>
      <img src="https://i.imgur.com/JaRX6SL.png" class="images" />
    </div>
    <div>
      <h2>Overflow</h2>
      <img src="https://i.imgur.com/JaRX6SL.png" class="images" />
    </div>
</div>

Solution 2:

using absolute :

.images {
    display: inline;
    margin: 0px;
    padding: 0px;
    vertical-align:middle;
    width:200px;

}
#content {
    display: block;
    margin: 0px;
    padding: 0px;
    position: relative;
    top: 90px;
    height: auto;
    max-width: auto;
    overflow-y: hidden;
    overflow-x:auto;
    word-wrap:normal;
    white-space:nowrap;
}
div.test {
      position: relative;
      float: left;
}
p {
      position: absolute;
      top: 25%;
      left: 50%;
}

<div id="content">
    <div class="test"><img src="https://i.imgur.com/JaRX6SL.png" class="images" />
    <p>oveflow</p></div>
    <div class="test"><img src="https://i.imgur.com/JaRX6SL.png" class="images" />
    <p>oveflow</p></div>
    <div class="test"><img src="https://i.imgur.com/JaRX6SL.png" class="images" />
    <p>oveflow</p></div>
</div>