砌體的響應式雙重覆蓋

Question

我試圖讓我的響應砌體在 WordPress 中使用雙重覆蓋。 目前，我已經設法使深色覆蓋尺寸與縮略圖圖像完美匹配。 我還添加了顯示在疊加層頂部的文本，因此在縮略圖上進行了雙重疊加。

問題是，當我調整 window 的大小或通過手機查看博客文章時，覆蓋 hover 的大小超過了縮略圖的大小，而在某些縮略圖上，覆蓋的 position 完全關閉。

如何確保雙重覆蓋（黑色透明 hover 和文本）保持在同一個 position 中並與縮略圖一起正確縮放？

這是我的代碼：

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

希望這可以解決您的問題。 如果沒有，請隨時詢問！