Html 如何使覆盖层适合图像的精确大小？

我试图使用叠加效果的图像，但我不能完全适合它的大小的图像

这是我的代码笔链接：

---

任何形式的帮助都将不胜感激

您忘记给出

位置：相对到父级，请只添加：

.a {
  position: relative;
}


img上的
#{
左边距：自动；
右边距：自动；
显示：块；
}
琼伯伦先生{
背景图像：url（“https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRygQnWzs3GfysYKie99aTXhbYvGrS7gxQzTAFFu9DN4azC_nwz");
背景位置：中心；
背景尺寸：封面；
}
h3{
文字颜色：黑色；
}
#h2族{
颜色：黑色；
文字装饰：无；
}
#导航h3{
颜色：黑色；
文字装饰：无；
}
.文本{
空白：nowrap；
颜色：黑色；
字体大小：20px；
位置：绝对位置；
溢出：隐藏；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
}
.a{
位置：相对位置；
}
.a:悬停。覆盖{
身高：100%；
}
.b:悬停。覆盖{
身高：100%；
}
.覆盖{
位置：绝对位置；
底部：0；
左：0；
右：0；
背景色：白色；
溢出：隐藏；
宽度：100%；
身高：0；
过渡：放松；
}

见见家人
是我们！
你好，世界
为了让您了解这是如何工作的，我已经剥离了您的CSS，将重点放在这里需要的内容上

我认为您应该将image和overlay div都包装在另一个元素中，我已经给了类
inner wrap
，如下所示。此元素应为
位置：相对
，因为它是图像和覆盖的父元素

然后，您可以给出叠加
位置：绝对
，使其按照父对象放置。我已经把它延伸到整个家长，并添加了一个半透明的背景色，这样你就可以更容易地看到发生了什么


。内包装{
位置：相对位置；
}
.覆盖{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
背景：rgba（255255,0.4）；
文本对齐：居中；
}

见见家人
是我们！
你好，世界

.myjumbotron{
 background-color: black;
} */
#over img {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.jumbotron {
    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRygQnWzs3GfysYKie99aTXhbYvGrS7gxQzTAFFu9DN4azC_nwz");
    background-position: center;
    background-size: cover;
}
h3{
    text-color:black;
}
#family h2{
    color: black;
    text-decoration:none;
}

#Nav h3{
    color: black;
    text-decoration:none;
}
/* .wrapper {
    position: relative;
    padding: 0;
    width:100px;
    display:block;
}
.text {
    position: absolute;
    top: 0;
    color:#f00;
    background-color:rgba(255,255,255,0.8);
    width: 100px;
    height: 100px;
    line-height:100px;
    text-align: center;
    z-index: 10;
    opacity: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.text:hover {
    opacity:1;
}


img {
    z-index:1;
}
 */
.text {
    white-space: nowrap; 
    color: black;
    font-size: 20px;
    position: absolute;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.a:hover .overlay {
    height: 100%;

}
  .b:hover .overlay {
    height: 100%;

}
.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    overflow: hidden;
    width:100%;
    height: 0;
    transition: .5s ease;
}

/* .team-item {
    display:inline-block;
    background:red;
    margin-bottom:10px;
}
 */

.a {
  position: relative;
}