为什么我的叠加层在 img 悬停时不起作用?

Question

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

我的第一个想法是，也许叠加层隐藏在 z 索引中的值后面。更改值时，结果未更改。

我尝试移动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
}

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