將一個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; 
} 

道歉的ambiguity-任何及所有的幫助是非常感謝！

Answer 1

您首先需要將.overlay與img對換，因此它排在第二位。

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

DEMO

DEMO with multiple divs floating and simple grid

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>