將div疊加到圖像的尺寸

Question

這是一個有點棘手的問題-本質上，我正在制作一個圖像網格，其中在鼠標懸停時顯示彩色疊加層（div），該div中有一些文本。 這是非常相似，這個網站- http://twoarmsinc.com/work/category/all 。 要使用div代替圖像而不是圖像，這很容易-您可以將疊加層嵌套在另一個div中，並將寬度和高度設置為100％。 但是，由於您不能嵌套在圖像中，並且圖像正在響應性地改變大小，因此我應該如何處理？ 我不確定背景圖片是否可以正常工作，因為我使用的是響應式網格系統（簡單網格）。

這是一個CodePen： http ://codepen.io/anon/pen/iIsGm/

HTML：

<div>
   <div class='overlay'></div>
   <img src="http://placekitten.com/300/200" alt="thumb">
</div>

CSS：

.overlay{
width:100%;
height:100%;
background:#333;
position:relative;
z-index:10;
}

含糊其辭的道歉-我們將不勝感激！

Answer 1

您首先需要將.overlay與img交換，因此它在堆棧中排第二。

.container div有一些選項，但是您需要設置寬度來設置網格。 我沒有在小提琴中包含它，但是您可能希望將img設置為max-width: 100%; width: auto; height: auto; max-width: 100%; width: auto; height: auto; ，因此它們可以調整大小並在調整瀏覽器大小時保持其寬高比。 對於.container ，還可以使用float: left並設置一個width 。 我在這里使用display: inline-block來減少代碼量。

DEMO

具有多個div浮動和簡單網格的DEMO

CSS：

.overlay{
    background:rgba(0,0,0,0.5);
    position:absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    color: white;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

img {
  display: block;  
}
.container {
    position: relative;
    display: inline-block;
}

.container:hover > .overlay {
    opacity: 1;
}

HTML：

<div class="container">
    <img src="http://placekitten.com/300/200" alt="thumb">
    <div class='overlay'>Some text</div>
</div>