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;，这样他们就可以在调整浏览器大小时调整大小并保持其宽高比。对于.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>

将div叠加到图像的尺寸

1 个答案: