Html 暗化图像问题

我正在尝试获取一个图像，并将其变暗，然后当鼠标悬停在图像上时，图像将展开。到目前为止，这是我的Css和html：

模块{
宽度：400px；
高度：300px；
位置：静态；
溢出：无；
显示：表格单元格；
}
.模块：悬停{
-ms转换：所有3s轻松；
过渡：所有3s轻松；
-ms变换：标度（1.05）；
转换：标度（1.05）；
}
.覆盖{
位置：绝对位置；
底部：0%；
左：0%；
右：0%；
溢出：隐藏；
宽度：100%；
身高：100%；
过渡：3s轻松；
}
.module.overlay{
身高：100%；
背景：
线性梯度(
归根结底，
rgba（0,0,0,0），
rgba（0,0,0,1）
);
}
.文本{
空白：nowrap；
颜色：白色；
字体大小：30px；
位置：绝对位置；
溢出：隐藏；
最高：95%；
左：50%；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
}

数字培训服务

添加类名“transeffect”，您可能需要根据需要调整不透明度。 删除覆盖层，因为您不需要覆盖层来使图像变暗

模块{
宽度：100%；
身高：100%；
位置：相对位置；
溢出：无；
显示：表格单元格；
}
.模块：悬停{
-ms转换：所有3s轻松；
过渡：所有3s轻松；
-ms变换：标度（1.05）；
转换：标度（1.05）；
}
.覆盖{
位置：绝对位置；
底部：0%；
左：0%；
右：0%；
溢出：隐藏；
宽度：100%；
身高：100%；
过渡：3s轻松；
}
.文本{
空白：nowrap；
颜色：白色；
字体大小：30px；
位置：绝对位置；
溢出：隐藏；
最高：95%；
左：50%；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
}
img{
最大宽度：100%；
最大高度：100%；
}
img.transeffect：悬停{
过滤器：α（不透明度=50）；
-moz不透明度：0.5；
-khtml不透明度：0.5；
不透明度：0.5；
}

数字培训服务

图像是否已经变暗？或者悬停是否会使图像变暗？我希望它从悬停时开始变暗，悬停后继续变暗，或者变回较浅的颜色？悬停后，图像变暗应消失！什么是跨效应？它只影响图像而不影响文本吗？transeffect只是一个类名。您可以为您想要的任何名称创建一个类名，然后声明您想要它做什么。它只影响img，除非你想让它影响文本