html - 将 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 有一些选项，但您需要设置宽度以设置网格。我没有将它包含在 fiddle 中，但您可能希望将 img 设置为 max-width: 100%;宽度:自动； 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>