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

Answer 2

当你指定position：absolute时，它将自己定位到position：relative的下一个最高元素。在这种情况下，那是.project div。

如果你给图像的直接父div一个位置样式：relative，那么叠加将键入而不是包含文本的div。例如：http://jsfiddle.net/7gYUU/1/

 <div class="parent">
    <img src="http://placehold.it/500x500" class="img-responsive"/>
    <div class="fa fa-plus project-overlay"></div>
 </div>

.parent {
   position: relative;
}

Answer 3

如果我理解你的问题，你想要将叠加层放在图像上而不是覆盖所有内容？

我将父DIV（我在jsfiddle的内容中重命名）位置设置为relative，因为叠加层应相对于此div而不是窗口定位。

.content
{
  position: relative;
}

我做了一些麻烦并更新了你的小提琴，只是让img的叠加大小（我认为）就是你想要的东西，无论如何让我知道:) http://jsfiddle.net/b9Vyw/

Answer 4

我也遇到了一些麻烦。使用brouxhaha的回答让我90％的方式达到我想要的目的。但填充调整不允许我将文本放在我想要的任何地方。使用top和left似乎对我的目的更有效。

.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    top: 80%;
    left: 20%;
}

http://jsfiddle.net/1rz0b7d8/1/

Answer 5

<div class="col-md-4 py-3 pic-card">
          <div class="card ">
          <div class="pic-overlay"></div>
          <img class="img-fluid " src="images/Site Images/Health & Fitness-01.png" alt="">
          <div class="centeredcard">
            <h3>
              <span class="card-headings">HEALTH & FITNESS</span>
            </h3>
            <div class="content-inner mt-5">
              <p class="lead  p-overlay">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ipsam nemo quasi quo quae voluptate.</p>
            </div>
          </div>
          </div>
        </div>


.pic-card{
     position: relative;

 }
 .pic-overlay{

    top: 0;
    left: 0;
    right:0;
    bottom:0;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: background-color 0.5s ease;

 }
 .content-inner{
    position: relative;
     display: none;
 }

 .pic-card:hover{
     .pic-overlay{
        background-color: $dark-overlay;

     }

     .content-inner{
         display: block;
         cursor: pointer;
     }

     .card-headings{
        font-size: 15px;
        padding: 0;
     }

     .card-headings::after{
        content: '';
        width: 80%;
        border-bottom: solid 2px  rgb(52, 178, 179);
        position: absolute;
        left: 5%;
        top: 25%;
        z-index: 1;
     }
     .p-overlay{
         font-size: 15px;
     }
 }



enter code here

图像覆盖在响应大小的图像引导程序上

5 个答案: