圖片與絕對定位文本

Question

我想重現此頁面上的4張平方圖片：https://pura-moringa.de/ - >向下滾動1次

但我就是無法弄清楚如何做到這一點..我如何在所有4個方塊上獲得圖像上的文字？

這是我的代碼（試圖把它從頁面複製到理解，但不工作）

這是一個方形：

<div class="col-xs-6"> 
<div class="minibanner is-square"> 
<img class="minibanner-image" src="https://pura-moringa.de/skin/frontend/copimaj/default/images/minibanners/moringa-feel-good.jpg" alt="7 Gründe, warum du dich mit Moringa besser fühlst"/> 
<div class="minibanner-content"> 
<h3>10 Gründe, warum du dich mit Moringa besser fühlst</h3> 
<a class="btn btn-sm btn-primary" href="https://pura-moringa.de/moringa-wirkung" title="10 Gründe, warum du dich mit Moringa besser fühlst">Mehr erfahren</a> 
</div> 
<a class="overlay" href="https://pura-moringa.de/moringa-wirkung" title="10 Gründe, warum du dich mit Moringa besser fühlst"/> 
</div> 
</div> 

https://jsfiddle.net/rrbb2L5j/#&togetherjs=CtR9J6JfnD

謝謝！

Answer 1

您可以通過使用絕對位置做到這一點

.minibanner-content{ 
    position:absolute; 
    top:0; 
} 
.minibanner.is-square{ 
    position:relative; 
}