Simple Image Overlay Hover Effects实现时图片溢出div底部问题求解

你的代码存在两处核心错误导致图片溢出：

• 你给.image-hover设置了position: absolute，覆盖了元素上position-relative类的相对定位属性，绝对定位让容器脱离文档流，父元素没有对应高度约束，自然无法限制内部元素溢出
• overflow: hidden被错误添加到img元素上，该属性仅对元素内部的内容生效，加在子元素上无法限制自身超出父容器的部分
• 额外存在语法错误：font-weight不需要px单位，原代码里的700px属于无效写法

修复方案 #

直接修改.image-hover的CSS规则，移除绝对定位声明即可，其余逻辑保留：

/* 仅修改这个选择器的内容即可 */
.image-hover {
   overflow: hidden !important;
   border-radius: 0.2rem;
   /* 删除原来的position: absolute; 保留父元素上position-relative类的相对定位 */
}

同时可以删掉img上的overflow-hidden类，该属性对img元素本身无意义。

完整可运行代码 #

CSS部分

.card {
   width:50%;
   margin:0 auto;
}

.position-relative {
   position: relative !important;
}

.image-hover {
   overflow: hidden !important;
   border-radius: 0.2rem;
}

.image-hover img,
.image-hover {
   transition: transform 1.5s;
}

.image-hover:hover img {
   transform: scale(1.5);
}

.image-hover:hover {
   background: blue;
}

.card__overlay {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   width: 100%;
   padding-left: 10px;
   padding-bottom: 10px;
   color: #fff;
}

.overlay__text {
   font-weight: 700;
}

HTML部分

<div class="card">
   <div class="position-relative image-hover">
      <img src="https://cdn.pixabay.com/photo/2018/03/13/22/53/puzzle-3223941__480.jpg" alt="wererw" width="100%" height="300" /> 
     <div class="card__overlay">
       <div class="overlay__text">
         <h3>Simple Image Overlay Hover Effects</h3>
         <p>Plan your next adventure</p>
         <a href="#" class="More">Read More</a>
       </div>
     </div>
   </div>
   <div>Some more text</div>
</div>

内容的提问来源于stack exchange，提问作者user1805543