如何让hover overlay仅作用于图片而非整个Bootstrap列？

问题场景 #

开发本地非公开项目，基于HTML、CSS和Bootstrap v5.0框架，参考预构建代码实现图片hover时显示覆盖层的效果，但当前覆盖层会填充整个Bootstrap列，需要让覆盖层仅显示在图片区域。

问题根源 #

1. 覆盖层元素.overlay的HTML结构位置错误，未放置在图片的父容器内，导致其绝对定位的参考元素不是图片容器
2. 图片的直接父容器未设置position: relative，无法作为绝对定位覆盖层的定位基准

修复方案 #

1. 调整HTML结构 #

将.overlay元素移动到包含图片的.card容器内部，确保它与图片元素同级。

2. 调整CSS样式 #

将原CSS中定位基准的.container选择器替换为.card，并确保.card设置position: relative，让覆盖层相对于card（即图片所在容器）进行定位。

修改后完整代码 #

CSS代码

.card {
    position: relative; /* 设置为覆盖层的定位基准 */
}
  
.image {
    display: block;
    width: 100%;
    height: auto;
}
  
.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: black;
}
  
.card:hover .overlay {
    opacity: 0.65;
}
  
.text {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

HTML代码

<div class="col-12 col-md-6 mb-4 col-lg-2 personal-grid">
    <div class="card ms-4 me-4 shadow-sm">
        <a class="image" href="#">
            <img class="bd-placeholder-img card-img-top d-sm-block d-md-block d-lg-none cardsize"  
                 src="images/blackopsm.jpg" 
                 role="img" 
                 aria-label="Placeholder: Thumbnail" 
                 preserveAspectRatio="xMidYMid slice" 
                 focusable="false">
        </a>
        <a href="#">
            <img class="bd-placeholder-img card-img-top d-sm-none d-md-none d-lg-block hidecard" 
                 style="width: 100%; height: 100%;"  
                 src="images/call-of-duty-black-ops-steam.jpg" 
                 role="img" 
                 aria-label="Placeholder: Thumbnail" 
                 preserveAspectRatio="xMidYMid slice" 
                 focusable="false">
        </a>
        <div class="overlay">
            <div class="text">Call of Duty: Black Ops</div>
        </div>
        <div class="d-flex justify-content-between align-items-center">
        </div>
    </div>
</div>

说明 #

• 绝对定位的.overlay会以设置了position: relative的.card为基准进行定位，正好覆盖card内的图片区域
• 移除了原HTML中多余的重复card类，简化结构
• 保留了原有的响应式图片切换逻辑，hover效果仅作用于当前显示的图片所在的card容器

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