Yanıt veren siteleri de destekleyen bir görüntüde metin yer paylaşımı yapmak istiyorum

Question

Aşağıdaki HTML kodudur. Tasarım için bootstrap 3 kullanıyorum. Metni bir resmin üzerine yerleştirdim, ancak sorun doğru konumda olmadığından sorun oluşuyor. Tarayıcıyı yeniden boyutlandırırken, arka plandaki metnin konumu yanlış olur. Bu yüzden lütfen bu sorunun nasıl çözüleceğine bana yardımcı olun.

<div class = "col-xs-12"> 
<h3 class="cen-align">STORIES OF CHANGE</h3> 
<img src="img/rig_img1.jpg" class="center-block img-responsive image-wrapper" /> 
<p class="img-ps">Advocating Land Rights for BPL Dalit communities in Alampur village...</p> 
</div> 

CSS Kod: Sana ihtiyacım ama bu sizin için çalışan yok tam olarak ne olduğunu bilmiyorum

.img-ps{ 
font-size:13px; 
text-align:center; 
position: absolute; 
left:66px; 
top:143px; 
padding: 10px; 
background-color:rgba(0,0,0,0.3); 
width: 248px; 
color: #FFF; 
margin: 0px; 
} 
.image-wrapper{ 
position: relative; 
width: 250px; 
} 

Answer 1

?

HTML:

<div class = "col-xs-12"> 
    <h3 class="cen-align">STORIES OF CHANGE</h3> 
    <img src="img/rig_img1.jpg" class="image"> 
    <p>Advocating Land Rights for BPL Dalit communities in Alampur village...</p> 
</div> 

CSS:

.image { 
    position: relative; 

} 

p { 
    position: absolute; 
    top: 200px; 
    left: 0; 
    width: 100%; 
    color: white; 
}