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

我正在尝试创建一个响应的图像网格（带有描述），当鼠标移到上面时，它将有一个颜色覆盖（只有图像而不是文本）。由于图像的响应高度，我遇到了一个问题，覆盖覆盖了一切，而不仅仅是图像

我有办法解决这个问题吗

为了便于理解，我在这里重新创建了该问题：

这是我的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>

---

提前谢谢

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

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

对于要相对于该父元素定位的子元素，在具有

位置：绝对
的子元素的父元素上需要
位置：相对

当您指定位置：绝对时，它将自身定位到具有位置：相对的下一个最高元素。在本例中，这是.project div

如果为图像的直接父div指定position:relative样式，则覆盖将为其设置关键帧，而不是包含文本的div。例如：


.家长{
位置：相对位置；
}
如果我理解您的问题，您希望将图像覆盖在图像上，而不是覆盖所有内容

我将父DIV（我在jsfiddle的content中重命名）的位置设置为relative，因为覆盖应该相对于这个DIV而不是窗口定位

.content
{
  position: relative;
}

我做了一些改动，并更新了你的小提琴，使叠加的大小与img一致（我想这是你想要的，不管怎样，请让我知道：）
我也遇到了一些麻烦。使用brouxhaha的答案，我找到了90%的答案。但是填充调整不允许我将文本放在任何我想要的地方。从我的角度来看，使用top和left似乎效果更好

.projectoverlay{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
颜色：#fff；
最高：80%；
左：20%；
}


健康与健身
Lorem ipsum Door sit amet，Concetetur Adipising Elite。这是一个很好的例子
.pic卡{
位置：相对位置；
}
.pic覆盖图{
排名：0；
左：0；
右：0；
底部：0；
宽度：100%；
身高：100%；
位置：绝对位置；
过渡：背景色0.5s；
}
.内部内容{
位置：相对位置；
显示：无；
}
.图片卡：悬停{
.pic覆盖图{
背景色：$深色叠加；
}
.内部内容{
显示：块；
光标：指针；
}
.卡片标题{
字体大小：15px；
填充：0；
}
.卡片标题：：之后{
内容：''；
宽度：80%；
边框底部：实心2倍rgb（52178179）；
位置：绝对位置；
左：5%；
最高：25%；
z指数：1；
}
.p-覆盖{
字体大小：15px；
}
}
在这里输入代码
工作正常！谢谢没问题。注意：如果图像不相邻，则需要使用
最大宽度
。如果没有设置宽度（或最大宽度）或100%图像，覆盖将延伸到图像之外，因为默认情况下div会延伸到其父图像的大小。您可以通过调整FIDLE结果区域的大小并删除最大宽度来看到这一点。覆盖的文本似乎没有居中。文本居中，但它扩展到了整个屏幕宽度，因此它没有与图像对齐。这一点在任何网格系统中都应该注意，但是我编辑了JSFIDLE，在包含文本的div中添加了一个
max width
，因此它在所有宽度上都与图像对齐。它适用于矩形，但需要调整覆盖的填充，以考虑图像高度的变化：工作！我不能回答两个问题，但我投了更高的票！谢谢你的帮助！！
 <div class="parent">
    <img src="http://placehold.it/500x500" class="img-responsive"/>
    <div class="fa fa-plus project-overlay"></div>
 </div>

.parent {
   position: relative;
}

.content
{
  position: relative;
}

<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