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>

you can refer https://stackoverflow.com/questions/8708945/how-to-position-text-over-an-image-in-css — Jin, Jun 05 '17 at 02:09
I didn't look at your css carefully, but my initial thought when I read what you're trying to do is to use a combination of position: relative and position: absolute to put the text above the images. — wmock, Jun 05 '17 at 02:29

score 2 · Accepted Answer · answered Jun 05 '17 at 04:18

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/

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

1 Answers1