javascript - 图像上的多重叠加

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。您必须将媒体内容的位置设置为 relative，将 3 层的 absolute 定位到底部并将 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;
}