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

问题描述

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

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

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

这是我的 HTML:

<div class="col-xs-12 col-sm-6 col-md-3 项目"><a href="#"><div><img src="http://placehold.it/500x500" class="img-responsive"/><div class="fa fa-plus project-overlay"></div>
<div style="text-align:center;"><h3>项目名称</h3><p>图片描述</p>

</a>

还有我的 CSS:

.project-overlay {位置:绝对；顶部:0；宽度:100%；高度:100%；背景颜色:RGBA(41,128,185,0.9)；颜色:#fff;填充:50%；}

提前致谢！

解决方案

在包含的div中添加一个类，然后在上面设置如下css:

.img-overlay {位置:相对；最大宽度:500px；//无论你的最大宽度应该是什么}

position:relative 对于具有 position: absolute 的子元素的父元素是必需的，以便子元素相对于该父元素进行定位.

演示

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?

I've recreated the issue here for easier understanding: http://jsfiddle.net/r8rFc/

Here is my 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>

And my CSS:

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

Thanks in advance!

解决方案

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: relative is required on a parent element of children with position: absolute for the children to be positioned in relation to that parent.

DEMO

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