Html 公文包悬停覆盖未保持图像大小

对于我的公文包网站，我正在制作它，所以当你在公文包图像上悬停时，它会覆盖标题和类别。我的问题是重叠部分在网格中拾取图像间距的边距和填充。我不能让它成为任何组合图像大小不删除图像之间的沟

示例如下：

不知道如何解决这个问题，任何帮助都将不胜感激

缩略图{
填充：0px！重要；
边缘底部：25px；
边界：无；
边界半径：0；
显示：块；
}
.缩略图像{
宽度：100%；
身高：100%；
边缘底部：0px；
显示：块；
}
.覆盖{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
身高：100%；
宽度：100%；
不透明度：0；
填充：0px 0px 0px 0px；
过渡：放松；
背景色：rgba（136,24,38,0.6）；
}
.缩略图：悬停。覆盖{
不透明度：1；
身高：100%；
宽度：100%；
}
.文本{
颜色：白色；
字体大小：20px；
位置：绝对位置；
宽度：70%；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
}

我的作品

使用绝对定位元素时，始终设置相应的相对定位元素。如果您对输出有任何问题，请告诉我

唯一的CSS更改是下面的类。我在其中添加了属性

位置：relative

.thumbnail {
  padding: 0px !important;
  position: relative;
  margin-bottom: 25px;
  border: none;
  border-radius: 0;
  display: block;
}

因此，带有类

覆盖的绝对定位div将相对于带有类
缩略图的div定位


缩略图{
填充：0px！重要；
位置：相对位置；
边缘底部：25px；
边界：无；
边界半径：0；
显示：块；
}
.缩略图像{
宽度：100%；
身高：100%；
边缘底部：0px；
显示：块；
}
.覆盖{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
身高：100%；
宽度：100%；
不透明度：0；
填充：0px 0px 0px 0px；
过渡：放松；
背景色：rgba（136,24,38,0.6）；
}
.缩略图：悬停。覆盖{
不透明度：1；
身高：100%；
宽度：100%；
}
.文本{
颜色：白色；
字体大小：20px；
位置：绝对位置；
宽度：70%；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
}

我的作品
@Richard这对你有帮助吗？是的，这很有效！真不敢相信我居然忽略了这个职位。