Question

我一直在尝试放大图片，并在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

尝试设置叠加层的宽度和高度。

class Members():
    def __init__(self, name:str, me_points:float, licence_points:int=21000):
        self._me_points = me_points
        self._licence_points = licence_points
        self._licence_complete =  True if licence_points == me_points else False
        self._name = name
    @property
    def licencePoints(self):
        return self._licence_points

    @property
    def mePoints(self):
        return self._me_points

    @mePoints.setter
    def mePoints(self, points:float):
        self._me_points = points

    @licencePoints.setter
    def licencePoints(self, points:int):
        self._licence_points = points

    @property
    def licenceComplete(self):
        return self._licence_complete

    def __repr__(self):
        return self._name

me = {Members('one',500,21000):[{Members('two'500,21000):{Members('trhee',500,21000):[]}}]}

print(me['one'])

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

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

这样，您无需创建.overlay div

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

1 个答案: