Question

我想在悬停时更改图像的不透明度，并同时在图像的中间显示文本。

我的代码是 HTML：

<div class="col-md-4 j-t">
    <div class="middle">
        <div class="text-middle">Play</div>
    </div>
</div>

CSS：

.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.text-middle {
    background-color: white;
    color: black;
    font-size: 16px;
    padding: 16px 32px;
}

.j-t {
    height: 315px;
    background: url("pictures/golden_cut.jpg") center center no-repeat;
    background-size: cover;
    transition: .5s ease;
    backface-visibility: hidden; 
    opacity: 1;
}

.j-t:hover {
    opacity: 0.3;
}

.j-t:hover .middle{
    opacity: 1;
}

按原样使用时，中间的文字也被图像的不透明度0.3覆盖。我希望中间的文字具有不透明度1。

请帮助。

Answer 1

不要在悬停时设置不透明度，而是使用background: rgba(0, 0, 0, 0.4)

更改背景颜色

Answer 2

很抱歉，由于未经测试，我的代码可能有一些不足，但是我已经处理了很多这个问题。容器的任何子项都会受到父项的不透明性的影响。取而代之的是将text-middle移到中部之外，并使j-t列相对定位。然后使用定位将text-middle放置在中部的顶部（middle和text-middle将相对于父级（j-t col）定位。然后，您的：hover不透明度只会影响.middle，而不会影响.text-middle

<div class="col-md-4 j-t">
    <div class="middle"></div>
    <div class="text-middle">Play</div>
</div>


.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.text-middle {
    position: absolute;
    top: -50%;
    background-color: white;
    color: black;
    font-size: 16px;
    padding: 16px 32px;
}

.j-t {
    position: relative;
    height: 315px;
    background: url("pictures/golden_cut.jpg") center center no-repeat;
    background-size: cover;
    transition: .5s ease;
    backface-visibility: hidden; 
    opacity: 1;
}

.j-t:hover {
    opacity: 0.3;
}

.j-t:hover .middle{
    opacity: 1;
}

更改悬停时图像的不透明度，但中间的文本除外

2 个答案: