Question

我已经阅读了几个教程和论坛，其中包括如何在图像上创建悬停状态描述覆盖的这个和其他来源。我也成功创建了它的一个版本。然而，有一个问题：它没有响应（或它优雅地打破）。

   <div class="section">
    <ul>
        <li>
            <div>
                <p><b>1 unit Mathematics extension</b></p>
                <img src="img/thumbnail.png" alt="Thumbnail">
                <p id="overlay">Placerat massa ut est, in, .</p>
            </div>
        </li>       
    </ul>
</div>

注意*：我在列表中拥有它的原因是在桌面和平板电脑视图中我希望在页面上显示3个图像。

我的相关CSS是：

.section ul{
    list-style-type: none;
    width: 100%;
    margin: 0;
    padding: 0; 
}

.section li{
    width: 100%;
    padding-bottom: 30px;
}

.section img{
    width:90%;
}

#overlay{
    width: 90%;
    position: relative;
    left: 5%;
    bottom: 127px;
    color: white;
    background: rgba(0, 0, 0, 0.7);
}

我的问题是#overlay css，我试图将叠加层的底部对齐到图像的下边缘。但是当我做一个百分比，例如bottom：x％它不起作用，这迫使我使用固定的px。但是，当我这样做时，根据窗口的宽度，叠加层的高度会发生变化，有时会导致叠加层的下边缘与边缘的底部不对齐。

有没有办法只使用css和html来解决这个问题？

如果有人能够提供一些非常感激的输入！

先谢谢大家。

Answer 1

将z-index用于#overlay

#overlay{
    width: 90%;
    position: relative;

    bottom: 50px;
    color: white;
    background: rgba(0, 0, 0, 0.7);
    z-index:1;
}

DEMO

检查演示并展开并折叠结果窗口以了解重复性

Answer 2

有时jQuery非常容易帮助我们解决棘手的CSS

检查此jsFiddle

jQuery（库1.7.2）

jQuery(document).ready(function(){
    $("img").mouseover(function(){
        $("#overlay").css("z-index","9999");
    });
    $("img").mouseout(function(){
        $("#overlay").css("z-index","-1");
    });
});

CSS：悬停时图像上的文本叠加

2 个答案:

检查此jsFiddle