悬停时的CSS HTML模糊图片标记

我正在为我的一门课程开发一个门户网站，我的教授为我们提供的模板使用了

标记，因此它们会根据浏览器的大小而变化。我想模糊和变暗的图像，并显示文字赞扬悬停的艺术家

您可以查看该网站及其外观

以下是我的HTML代码：

以及我对CSS的尝试：

图片：悬停>.overlay{
背景色：#000；
不透明度：0.5；
过滤器：模糊（8px）；
-webkit过滤器：模糊（8px）；

---

如果我将

放在

中，然后对其应用CSS，这是否可行？这是否仍能保持图像的响应性？

您不需要.overlay div。您可以通过使用before和/或after psuedo元素来实现。与图片上的数据属性结合使用（参见下面的示例）

图片{
位置：相对位置；
}
图片：之前{
内容：attr（数据作者）；
显示：无；
位置：绝对位置；
不透明度：0；
排名：0；
右：0；
左：0；
底部：0；
背景色：#000；
不透明度：0.5；
过滤器：模糊（8px）；
}
图片：悬停：之前，
图片：悬停：之后{
显示：块；
}
图片：之后{
内容：attr（数据作者）；
显示：无；
颜色：白色；
字体大小：粗体；
位置：绝对位置；
排名：0；
左：0；
右：0；
文本对齐：居中；
}

---

您不需要.overlay div。您可以使用before和/或after psuedo元素，并结合图片上的数据属性（参见下面的示例）来完成此操作

图片{
位置：相对位置；
}
图片：之前{
内容：attr（数据作者）；
显示：无；
位置：绝对位置；
不透明度：0；
排名：0；
右：0；
左：0；
底部：0；
背景色：#000；
不透明度：0.5；
过滤器：模糊（8px）；
}
图片：悬停：之前，
图片：悬停：之后{
显示：块；
}
图片：之后{
内容：attr（数据作者）；
显示：无；
颜色：白色；
字体大小：粗体；
位置：绝对位置；
排名：0；
左：0；
右：0；
文本对齐：居中；
}

---

您可以使用

过滤器的组合来模糊和变暗悬停时的图像

例如：

picture:hover img {
  filter:blur(6px) contrast(40%);
}

覆盖是次要的。伪元素或实际div可用于此效果


正文{
文本对齐：居中；
}
图画{
保证金：1em自动；
显示：内联块；
位置：相对位置；
边框：2倍纯绿；
}
图片：：之后{
内容：“作者详细信息”；
显示器：flex；
证明内容：中心；
对齐项目：居中；
颜色：白色；
字号：2em；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
不透明度：0；
过渡：不透明度。3s缓解；
}
图片：悬停：：之后{
不透明度：1；
}
img{
过渡：全部3秒轻松；
显示：块；
}
图片：悬停img{
滤镜：模糊（6px）对比度（40%）；
}
您可以使用
过滤器的组合来模糊和变暗悬停时的图像

例如：

picture:hover img {
  filter:blur(6px) contrast(40%);
}

覆盖是次要的。伪元素或实际div可用于此效果


正文{
文本对齐：居中；
}
图画{
保证金：1em自动；
显示：内联块；
位置：相对位置；
边框：2倍纯绿；
}
图片：：之后{
内容：“作者详细信息”；
显示器：flex；
证明内容：中心；
对齐项目：居中；
颜色：白色；
字号：2em；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
不透明度：0；
过渡：不透明度。3s缓解；
}
图片：悬停：：之后{
不透明度：1；
}
img{
过渡：全部3秒轻松；
显示：块；
}
图片：悬停img{
滤镜：模糊（6px）对比度（40%）；
}

您没有任何元素具有类
覆盖
您没有任何元素具有类
覆盖