Javascript 图像上的多重叠加

我在一个图像中创建了两个覆盖

一个覆盖层固定在图像底部，第二个覆盖层将显示在鼠标悬停时

我的问题是，第二个覆盖显示在第一个覆盖上，但它不应该显示在固定的覆盖上

部分演示示例如下所示。请也找到截图

请帮助我或指导我找到解决问题或实施设计的正确方法

HTML

Jquery

---

它大约是第三层的z指数。您必须将媒体内容的位置设置为“相对”，将“绝对”的3层放置在底部，并将“z索引”设置为“底层”。就这样

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>

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

$(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
     });
 });

<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>

.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;
}