javascript - CSS:悬停时文本覆盖在图像上

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>

注意*:我将它放在列表中的原因是在桌面和平板电脑 View 中，我希望页面上显示 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，我试图将叠加层的底部与图像的底部边缘对齐。然而，当我做一个百分比时，例如底部:x% 它不起作用，这迫使我使用固定像素。但是，当我这样做时，根据窗口的宽度，覆盖层的高度会发生变化，有时会导致覆盖层的底部边缘与边缘底部不对齐。

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

如果有人能够提供一些意见，我们将不胜感激!

先谢谢大家。

Answer 1

对#overlay使用z-index

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

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

DEMO

查看演示并展开和折叠结果窗口以了解响应情况