Html 悬停时图像上的文本受过滤器亮度的影响

我试图创建带有文本的图像，但当它悬停时，图像的亮度会下降，但不会影响文本。我能用css实现吗

@mixin-easeOut{
过渡：所有0.3秒放松；
}
.团队照片{
显示器：flex；
柔性包装：包装；
div{
宽度：33%；
img{
显示：块；
宽度：100%；
填充：1rem；
@包括外借；
}
.团队图片说明{
不透明度：0；
位置：绝对位置；
底部：0；
左：0；
宽度：100%；
填充：1rem；
@包括外借；
颜色：#fff；
}
&：悬停{
滤镜：亮度（.5）；
.团队图片说明{
不透明度：1；
}
}
}
}

乔希·加伍德
联合创始人兼技术总监

杰森·本杰明
联合创始人兼营销总监

我有一些潜在的解决方案供您选择

这里是第一个（背景将模糊，但文本将保持不变，代码当然可以根据您的需要进行调整）：

#imgtext{
位置：相对位置；
浮动：左；
宽度：300px；
填充：30px；
利润率：15px；
边界半径：20px；
高度：150像素；
溢出：隐藏；
}
#imgtext：之后{
内容：''；
显示：块；
位置：绝对位置；
z指数：-1；
排名：0；
左：0；
底部：0；
右：0；
背景：url(https://upload.wikimedia.org/wikipedia/en/e/e4/Blank_cd.png)无重复中心；
背景尺寸：封面；
}
#imgtext:悬停：之后{
-webkit过滤器：模糊（5px）；
}
p{
字号：3em；
颜色：红色；
文本对齐：居中；
}

你好

不清楚您想要达到什么目标（至少对我来说是这样）。你能改变这个问题吗？你认为第一个提议的解决方案最适合你想要的吗