图像上的多重叠加

Question

我在图片中创建了两个叠加层。

一个叠加层固定在图像底部，第二个叠加层将显示在鼠标悬停上。

我的问题是第二个叠加层显示在第一个叠加层上，但它不应显示在固定叠加层上。

示例部分演示为here。请找到截图。

请帮助我或指导我以正确的方式解决问题或实施设计..

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-index。您必须将媒体内容的位置设置为相对，将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;
}