在响应大小的图像引导上的图像叠加 [英] Image overlay on responsive sized images bootstrap

问题描述

我试图创建一个响应的图像（具有描述）的网格，当鼠标悬停时将有一个颜色叠加（只是图像而不是文本）。因为图像的响应高度，我有一个问题，其中覆盖物覆盖一切，而不只是图像。

I am trying to create a responsive grid of images (with descriptions) that when moused over will have a color overlay (just the image and not the text). Because of the responsive heights of the images, I am having an issue where the overlay covers everything and not just the image.

我可以解决这个问题吗？

Any way I can fix this?

为了更容易理解，我在此重新创建了问题： http://jsfiddle.net/r8rFc/

I've recreated the issue here for easier understanding: 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%;
}

提前感谢！

推荐答案

向包含div添加类，然后在其上设置以下css：

Add a class to the containing div, then set the following css on it:

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

position ： c：

DEMO

DEMO

这篇关于在响应大小的图像引导上的图像叠加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！