Css 悬停功能和渲染未按预期用于图像上的覆盖

我想我的图像显示一个覆盖在悬停1。相同尺寸/尺寸2。具有不透明度和3的背景颜色。显示文本。我正在使用下面的CSS，但是覆盖（我的工作覆盖）类在默认情况下显示，没有悬停活动，即使我的父div“我的工作预览”应该是。在页面上提供我的自定义CCS+html

我多次检查我的类名，代码看起来很正确，默认情况下我的工作覆盖显示而不是悬停

CSS

。我的工作预览{
位置：相对位置；
宽度：100%；
}
1.我的工作形象{
显示：块；
宽度：100%；
高度：自动；
边界半径：25px；
}
.我的工作{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
身高：100%；
宽度：100%；
不透明度：0.8；
过渡：放松；
背景色：#000000；
边界半径：25px；
}
.我的工作预览：悬停.我的工作覆盖{
不透明度：8；边界半径：25px；
}
.我的作品文本{
颜色：白色；
字体大小：20px；
字体系列：sofia pro；
字体风格：粗体；
位置：相对位置；
最高：50%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
文本对齐：居中；
}

---

您已经设置了不透明度

不透明度：0.8

作为

div.my-work-preview

上的默认属性，会导致悬停不工作、禁用不透明度或将其值更改为其他值，这将解决悬停不工作的问题

。我的工作预览{
位置：相对位置；
宽度：100%；
}
1.我的工作形象{
显示：块；
宽度：100%；
高度：自动；
边界半径：25px；
}
.我的工作{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
身高：100%；
宽度：100%；
不透明度：0；
过渡：放松；
背景色：#000000；
边界半径：25px；
}
.我的工作预览：悬停.我的工作覆盖{
不透明度：8；边界半径：25px；
}
.我的作品文本{
颜色：白色；
字体大小：20px；
字体系列：sofia pro；
字体风格：粗体；
位置：相对位置；
最高：50%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
文本对齐：居中；
}