javascript - 为什么我的覆盖在 img 悬停上不起作用？

Question

我一直在尝试让我的 Img 缩放并在我的 img 悬停上生成带有文本的叠加层。文本和缩放当前有效，但叠加层无效。我的代码中缺少什么？

我的第一个想法是叠加层可能隐藏在 z-index 中的值后面。当值改变时，结果没有改变。

我试过移动 HTML 和 CSS 以查看是否有帮助。结果没有变化。

请记住，第 1 帧和第 2 帧是我目前要关注的。

谢谢!

.box-wrap {
    display: table;
    margin: 60px;
}

.zoom {
    position: relative;
}

.box-content h1{
    height: 100%;
    width: 100%;
    margin-top: 27%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

/* OVERLAY */

.zoom .overlay {
    background-color: black;
    position: absolute;
    z-index: 4;
    opacity: 0;
}

.zoom:hover .overlay {
    z-index: 4;
    opacity: 0.7;
}

/* END OVERLAY */

/* TEXT */

.zoom h1{
    color: white;
    position: absolute;
    visibility: hidden;
}

.zoom:hover h1 {
    pointer-events: none;
    visibility: visible;
    text-align: center;
    vertical-align: middle;
    z-index: 3;
}

/* END TEXT */

/* ZOOM EFFECT */

.zoom img {
    max-height: 100%;
    max-width: 100%;
    transition: 6s;
    transform: scale(1.0);
}

.zoom img:hover {
    transition: 6s;
    transform: scale(2.0);
}

.frame {
    float: left;
    height: 500px;
    width: 50%;
    overflow: hidden;
}

.frame img {
    height: 500px;
    width: 100%;
}

/* START BOX 2 */

.frame2 {
    float: right;
    height: 500px;
    width: 50%;
    overflow: hidden;
}

.frame2 img {
    height: 500px;
    width: 100%;
}

/* END BOX 2 */

/* START BOX 3*/

.frame3 {
    float: left;
    height:300px;
    width: 25%;
    overflow: hidden;
}

.frame3 img {
    height: 300px;
    width: 100%;
}

/* END BOX 3 */

/* START BOX 4 */

.frame4 {
    object-fit: cover;
    float: right;
    height:300px;
    width: 25%;
    overflow: hidden;
    object-fit: cover;
}

.frame4 img {
    height: 300px;
    width: 100%;
}

/* END OF BOX4 */

/* START BOX 5 */

.frame5 {
    float: left;
    height:300px;
    width: 25%;
    overflow: hidden;
    object-fit: cover;
}

.frame5 img {
    height: 300px;
    width: 100%;
}

/* END OF BOX5 */

/* START BOX 6 */

.frame6 {
    float: right;
    height:300px;
    width: 25%;
    overflow: hidden;
}

.frame6 img {
    height: 300px;
    width: 100%;
}

<div class="box-wrap">

<div class="frame zoom">
<div class="box-content">
<h1>SKULL</h1>
<img src="img/skull.jpg" alt="#">
<span class="overlay"></span>
</div>
</div>

<div class="frame2 zoom">
<div class="box-content">
<h1>SWIRL</h1>
<img src="img/liquify.jpg" alt="#">
<div class="overlay"></div>
</div>
</div>

<div class="frame3 zoom">
<div class="box-content">
<h1>SWIRL</h1>
<img src="img/chief.jpg" alt="#">
</div>
</div>

<div class="frame4 zoom">
<div class="box-content">
<h1>SWIRL</h1>
<img src="img/vect.png" alt="#">
</div>
</div>

<div class="frame5 zoom">
<div class="box-content">
<h1>SWIRL</h1>
<img src="img/sun.jpg" alt="#">
</div>
</div>

<div class="frame6 zoom">
<div class="box-content">
<h1>SWIRL</h1>
<img src="img/card.jpg" alt="#">
</div>
</div>

Answer 1

尝试设置覆盖宽度和高度。

.zoom .overlay {
    background-color: black;
    position: absolute;
    z-index: 4;
    opacity: 0;
    width: 100%; //define here
    height: 100% //define here
}

其他常用的方法是使用 :after 伪元素，例如:

.zoom:after {
    background-color: black;
    position: absolute;
    z-index: 4;
    opacity: 0;
    width: 100%; //define here
    height: 100% //define here
}

这样你就不需要创建一个.overlay div