Html 图像/文本上的悬停效果（web）

我正在尝试制作悬停效果，悬停后图像变暗，文本变亮。虽然图像变暗可以工作，但文本不透明度没有改变。有人能看一下吗？我的网站是

代码如下：

.image-overlay:after {
    content: '\A';
    position: absolute;
    width: 100%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.8);
    opacity: 0;
    transition: all 1s;
    -webkit-transition: all 0.3s;
}

.sqs-dynamic-text {opacity: 0.2;}

.image-overlay:hover:after{
    opacity: 1;
}

.image-overlay:hover:after .sqs-dynamic-text{
  opacity: 0.8;
}

---

使用alpha值代替不透明度 像foe 0.2不透明度一样使用

rgba(0,0,0,0.2) 

---

这里的前三个参数是颜色（红色、绿色和蓝色），第四个是alpha

plz更喜欢这个易于理解的链接bro@Hiroo