砌体的响应式双重叠加

Question

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

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

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

这是我的代码：

.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;
}

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

砌体的响应式双重叠加

Responsive Double Overlay for Masonry

html

javascript

css

wordpress

jquery-masonry