圖像上的多重覆蓋

Question

我在圖像中創建兩個覆蓋。

一個覆蓋圖固定在圖像的底部，第二個覆蓋圖將顯示在鼠標懸停上。

我的問題是第一個重疊顯示第二個重疊，但它不應該顯示在固定重疊。

示例部分演示爲here。請找到截圖。

請幫我或GUID我來解決問題或將實現設計的正確方法..

HTML

<section id="s-explore"> 
     <div class="pagebreak"><span>The Lifestyle</span> <i class="down">&lt;</i> 
     </div> 
     <div class="wrapper layout"> 
      <div class="col"> 
       <div class="media"> 
        <img id="d1" src="http://placekitten.com/300/300" /> 
        <div class="contenthover">     

         <p><a href="#" class="mybutton">Lorem ipsum</a> 
         </p> 
        </div> 
       </div> 

     </div> 

CSS

.contenthover{ 
    color:#fff; 
} 
.mybutton{  
    padding:20px; 
    color:#fff; 
    background-color:#000; 
    margin:10px; 
} 

Jquery

$(function() { 
    $(' #d1').contenthover({ 
     overlay_width: 300, 
     overlay_height: 150, 
     effect: 'slide', 
     slide_direction: 'bottom', 
     overlay_x_position: 'center', 
     overlay_y_position: 'bottom', 
     overlay_background: '#000', 
     overlay_opacity: 0.8 
    }); 
}); 

Answer 1

它只是關於第三層的z-索引。您必須將媒體內容的位置設置爲相對，將絕對位置設置爲3層，並將z-index設置爲底層。而已。

FIDDLE

HTML

<section id="s-explore"> 
    <div class="pagebreak"><span>The Lifestyle</span> <i class="down">&lt;</i> 
    </div> 
    <div class="wrapper layout"> 
     <div class="col"> 
      <div class="media"> 
       <img id="d1" src="http://placekitten.com/300/300" /> 
       <div class="contenthover">     

        <p><a href="#" class="mybutton">Lorem ipsum</a> 
        </p> 
       </div> 
       <div class="bottom_layer">colors</div> 
      </div> 

     </div> 

CSS

.contenthover{ 
    color:#fff; 
} 
.mybutton{  
    padding:20px; 
    color:#fff; 
    background-color:#000; 
    margin:10px; 
} 
.bottom_layer{ 
    position:absolute; 
    bottom: 0; 
    background:red; 
    z-index: 10; 
    width: 300px; 
} 
.media{ 
    position:relative; 
}