將圖像的標題從滑塊中移出

Question

我正面臨着一個大問題，那就是我想將圖像的標題放在滑塊外面。 我有主滑塊，滑塊顯示我的項目的圖像。 我想將每個項目的名稱放在滑塊下面（不在滑塊內部），並且名稱應該與圖像相對改變。 我試圖解決它，但它沒有奏效。 這裏是我的代碼腳本： 這個HTML：

<div class="master-slider ms-skin-contrast" id="masterslider" > 
     {% for project in projects %} 
      <div class="ms-slide"> 
       <img src="{{asset('uploads/images/')}}{{project.images[0].name}}" data-src="{{asset('uploads/images/')}}{{project.images[0].name}}" alt="{{project.name}}"/> 
       <div class="ms-layer ms-caption" id="image-caption"> 
        {{project.name}} 
       </div> 

      </div> 
     {% endfor %} 
    </div> 

這是CSS

#image-caption{ 
    position: fixed; /* Stay in place */ 
    z-index: 9999; /* Stay on top */ 
    top: 250px; 
    right: 800px; 
    color: red; 
} 

Answer 1

確定。現在我有一些想法如何工作。這將是一個更容易與您的全CSS，但你可以嘗試這樣的事情只是爲了看看會發生什麼：

#image-caption { 
    position: absolute; 
    bottom: -50px; 
}