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;
}

#contentdiv {
    position: relative;
}

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

<divid="content"><div><h2>Overflow</h2><imgsrc="https://i.imgur.com/JaRX6SL.png"class="images" /></div><div><h2>Overflow</h2><imgsrc="https://i.imgur.com/JaRX6SL.png"class="images" /></div><div><h2>Overflow</h2><imgsrc="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%;
}

<divid="content"><divclass="test"><imgsrc="https://i.imgur.com/JaRX6SL.png"class="images" /><p>oveflow</p></div><divclass="test"><imgsrc="https://i.imgur.com/JaRX6SL.png"class="images" /><p>oveflow</p></div><divclass="test"><imgsrc="https://i.imgur.com/JaRX6SL.png"class="images" /><p>oveflow</p></div></div>