Html Css网格和图像覆盖

我曾尝试将悬停效果放置在css网格中的图像上，但无法正确放置。滚动图像时会出现问题

悬停效果显示在栅格上方。我希望鼠标悬停在适当的图像上。我看过数百篇文章，但由于某种原因，我看不出问题所在。我曾试图用CSS来解决这个问题，并希望用CSS来解决这个问题，但我愿意接受建议

谁能帮我解决我做错了什么？如果您能提供任何帮助，我们将不胜感激。谢谢你的帮助

我提供了指向我的代码笔的链接：

下面是我与保存网格的主包装器一起编写的CSS：

.wrapper{
显示：网格；
网格模板列：自动；
网格模板行：自动30%40%auto；
网格模板区域：
“高清”
“英雄”
“案例研究”
“联系人”
“金融时报”；
}
/*案例研究*/
.个案研究{
对齐项目：拉伸；
显示：网格；
网格区域：案例研究；
网格模板柱：1fr 1fr 1fr；
网格模板行：自动；
自我辩护：伸展；
保证金：0；
}
.工作{
背景色：#F4FAFF；
格构柱：跨度3；
高度：自动；
填充：1rem；
保证金：0；
}
.工作h2{
颜色：#333745；
字体大小：3rem；
字体大小：300；
文本对齐：居中；
}
.content.content覆盖{
背景：rgba（0,0,0,0.7）；
位置：绝对位置；
宽度：100%；
左：0；
排名：0；
底部：0；
右：0；
不透明度：0；
保证金：0；
填充：0；
-webkit过渡：所有0.4s都易于输入输出0；
-moz转换：所有0.4都可以轻松地输入输出0；
过渡：所有0.4s均为0进0出；
}
.content：悬停。内容覆盖{
不透明度：1；
}
.内容图像{
宽度：100%；
身高：100%；
}
.内容详情{
位置：绝对位置；
文本对齐：居中；
填充：0 1rem；
宽度：100%；
最高：40%；
左：50%；
不透明度：0；
-webkit转换：翻译（-50%，-50%）；
-moz变换：平移（-50%，-50%）；
转换：翻译（-50%，-50%）；
-webkit转换：所有0.3都易于输入输出0；
-moz转换：所有0.3秒都可从0秒变为0秒；
过渡：所有0.3秒均为0秒；
}
.content:悬停。内容详细信息{
最高：50%；
左：50%；
不透明度：1；
}
.内容详情h2{
颜色：#F4FAFF；
字号：100；
边缘底部：0.5雷姆；
}
.内容详情{
颜色：#F4FAFF；
字号：1rem；
}
法登先生{
最高：80%；
}
这是调用我的CSS的html:

案例研究
全国房地产经纪人协会
入职项目
GWR智能家居
移动应用程序

kbb.com
折价交易
kbb.com
网站重新设计

TCP照明
智能照明移动应用程序

您只需将包装容器的位置设置为相对位置。与网格无关，只是定位元素相对于实体，计算宽度、高度和相对于实体的位置，而不是其父元素

你把背景画出来

.content .content-overlay

将父容器设置为相对，它就会工作

.content {
  position: relative;
}

---

您只需将包装容器的位置设置为“相对”。与网格无关，只是定位元素相对于实体，计算宽度、高度和相对于实体的位置，而不是其父元素

你把背景画出来

.content .content-overlay

将父容器设置为相对，它就会工作

.content {
  position: relative;
}

---

您试图使动画显示为整个视口的大小。这有点棘手，但是如果您检查控制台，您可以看到动画试图显示为整个屏幕。如果将内容类的位置更改为相对，这将使动画仅在所需元素上弹出。

您正在尝试使动画显示为整个视口的大小。这有点棘手，但是如果您检查控制台，您可以看到动画试图显示为整个屏幕。如果将内容类的位置更改为相对，这将使动画仅在所需元素上弹出