Add text over images next to each other with react inline styles

Question

I've lined up a set of equally sized images next to each other scaled by a percentage width. I'm fairly new to this and am hoping to get some help on figuring out how to now add text on top of each of the images.

const style1 = {  
  display: 'block'  
}

const style2 = {
  float: "center",  
  fontSize: '9pt',  
  textAlign: 'center',  
  width: '30%',  
  marginRight: '1.6666665%',  
  marginLeft: '1.6666665%',  
  marginTop: '1%',  
  marginBottom: '0.5em',  
}

<div style={style1}>
  <a href="" className="icons"><img style={style2} src="https://ucarecdn.com/182bd14b-648e-478f-a4dc-b885a489a543/-/crop/3456x3456/864,0/-/resize/500x500/"/></a>
  <a href="" className="icons"><img style={style2} src="https://ucarecdn.com/209579d4-2c4e-4422-b633-5b23edd7bc99/-/crop/1600x1600/480,0/-/resize/500x500/"/></a>
  <a href="" className="icons"><img style={style2} src="https://ucarecdn.com/a7d04a85-431e-401f-b534-de23dd6442f7/-/crop/2304x2304/576,0/-/resize/500x500/"/></a>
</div>

Answer 1

I create an example for you :

HTML :

<div class="image">
  <img src="http://lorempixel.com/400/400/sports/2" alt="" />      
  <h2><span>Some Text</span></h2></div><br/>
</div>

<div class="image">
  <img src="http://lorempixel.com/400/400/food/5" alt="" />      
  <h2><span>Some Other Text</span></h2></div><br/>
</div>

CSS :

.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

h2 { 
  position: absolute; 
  top: 300px; 
  left: 0; 
  width: 100%; 
}

h2 span { 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.4);
   padding: 10px; 
}

https://jsfiddle.net/emilvr/f03m3Lks/1/