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

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

我的代码是 HTML:

当使用时，中间的文本也从图像中覆盖不透明度0.3。我希望中间的文本不透明度为1

---

请提供帮助。

不要在悬停时设置不透明度，而是使用

背景：rgba（0，0，0，0.4）

很抱歉，由于未经测试，我的代码可能有点不正确，但我已多次处理此问题。容器的任何子容器都会受到父容器不透明度的影响。相反，将文本中间移到中间之外，并使j-t列相对定位。然后使用定位将文本中间置于中间之上（中间和文本中间将相对于父对象（j-t列）进行定位）。然后：悬停不透明度将只影响.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;
}

玩
.中{
过渡：放松；
不透明度：0；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
文本对齐：居中；
}
.文本中间{
位置：绝对位置；
前-50%；
背景色：白色；
颜色：黑色；
字体大小：16px；
填充：16px 32px；
}
.j-t{
位置：相对位置；
高度：315px；
背景：url（“pictures/golden_cut.jpg”）中心不重复；
背景尺寸：封面；
过渡：放松；
背面可见性：隐藏；
不透明度：1；
}
.j-t:悬停{
不透明度：0.3；
}
.j-t:悬停，中间{
不透明度：1；
}

这一点以前已经讨论过了：不是我想要的，我仍然希望看到背景中的图像。

background:rgba（0,0,0,0.4）

将背景更改为灰色。您可以在图像顶部添加一个大小相等的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 {
    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;
}

<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;
}