html - 图像叠加在响应大小的图像 Bootstrap 上

Question

我正在尝试创建一个响应式图像网格(带有描述)，当鼠标悬停在该网格上时将有一个颜色叠加层(只是图像而不是文本)。由于图像的响应高度，我遇到了叠加层覆盖所有内容而不仅仅是图像的问题。

有什么办法可以解决这个问题吗？

为了便于理解，我在这里重现了这个问题:http://jsfiddle.net/r8rFc/

这是我的 HTML:

<div class="row">

    <div class="col-xs-12 col-sm-6 col-md-3 project">
        <a href="#">
            <div>
                <img src="http://placehold.it/500x500" class="img-responsive"/>
                <div class="fa fa-plus project-overlay"></div>
            </div>
            <div style="text-align:center;">
                <h3>Project name</h3>
                <p>Image description</p>
            </div>
        </a>
    </div>

</div>

还有我的 CSS:

.project-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(41,128,185,0.9);
    color: #fff;
    padding: 50%;
}

提前致谢!

Answer 1

向包含的 div 添加一个类，然后在其上设置以下 css:

.img-overlay {
    position: relative;
    max-width: 500px; //whatever your max-width should be 
}

position: relative 在具有 position: absolute 的子元素的父元素上是必需的，以便子元素相对于该父元素定位。

DEMO