砌体的响应式双重覆盖

Question

我正在尝试让我的响应式 Masonry 在 WordPress 中使用双重覆盖。目前，我已经设法使深色覆盖尺寸与缩略图图像完美匹配。我还添加了显示在叠加层顶部的文本，因此在缩略图上进行了双重叠加。

问题是当我调整窗口大小或通过移动设备查看博客文章时，覆盖悬停大小超过缩略图大小，而在某些缩略图上，覆盖位置完全关闭。

如何确保双重叠加（黑色透明悬停和文本）保持在同一位置并与缩略图一起正确缩放？

这是我的代码：

.title, .excerpt, .date {
  position: absolute;
  z-index: 1;
}

.title {
bottom: 150px;
}

.date {
bottom: 130px;
}

.excerpt {
bottom: 100px;
}

.overlay:after {
  content: '';
  position: absolute;
  width: 362px;
  height: 362px;
  top: 5px; 
  left: 1;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

.overlay:hover:after {
  opacity:1;
}

更新：我还在我的媒体查询中添加了overlay，但它不会像我的缩略图那样使覆盖生效。

更新 2：Dantcho 的代码修复了使叠加层响应缩略图的问题。下一个问题是，因为覆盖设置为 100%，所以当我使用 padding: 10px; 时，它会使网格变大，但我不能让它变小。缩略图有内边距，我想保持这种内边距。

更新 3：不确定这是否是长期可行的解决方案，但无论哪种方式，它都有效。这将使覆盖层保持响应，我调整了top、left、width 和height 一点点以适应缩略图。

.overlay:after {
  content: '';
  position: absolute;
  width: 97.5%;
  height: 97.5%;
  top: 5px;
  left: 5px;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

更新 4：我找到了一个更好的选择，这将防止在调整浏览器大小时叠加层稍微不合适。

.overlay:after {
  content: '';
  position: absolute;
  display: block;
  height: calc(100% - 10px);
  width: calc(100% - 10px);
  top: 5px;
  left: 5px;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

干杯！

Answer 1

改变这个：

.overlay:after {
  content: '';
  position: absolute;
  width: 362px;
  height: 362px;
  top: 5px; 
  left: 1;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

到这里：

.overlay:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

希望这可以解决您的问题。如果没有，请随时询问！