我正在尝试创建一个响应的图像(包含描述)的网格,当moused over将有一个颜色覆盖(只是图像,而不是文本).由于图像的响应高度,我有一个问题,覆盖层覆盖了所有内容,而不仅仅是图像.
我可以解决这个问题吗？
我在这里重新创建了一个容易理解的问题：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%;
}
提前致谢！
