Hinzufügen von Text über Bilder nebeneinander mit reagieren Inline-Stilen

Question

Ich habe eine Reihe von gleich großen Bildern nebeneinander mit einer prozentualen Breite skaliert. Ich bin ziemlich neu und hoffe, dass ich Hilfe bei der Frage bekomme, wie ich nun Text auf jedes Bild hinzufügen kann.

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

Ich erstelle ein Beispiel für Sie:

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/