HTML&CSS悬停效果异常：悬停图片时服务名称仅显示在首张图

问题根源 #

所有.middle元素使用position: absolute定位，但父容器.col1未设置position: relative，导致这些绝对定位元素都以body作为定位基准，悬停时所有文本框会集中显示在页面中心（恰好对应首张图片的位置）。

修复方案 #

给.col1添加相对定位属性，让内部的绝对定位元素相对于父容器定位：

.col1 {
    max-width: 100%;
    position: relative; /* 新增相对定位 */
}

完整修改后的CSS代码 #

.col1 {
    max-width: 100%;
    position: relative;
}

.col1 img {
    height: 100%;
    width: 50%;
    opacity: 1;
    transition: .5s ease;
    backface-visibility: hidden;
}

.col1:hover img {
    opacity: 0.3;
}

.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.col1:hover .middle {
    opacity: 1;
}

.text {
    background-color: black;
    color: white;
    font-size: 16px;
    padding: 16px 32px;
}

原理说明 #

当元素设置position: absolute时，会自动寻找最近的**已定位（position值不为static）**祖先元素作为定位参照。给.col1设置position: relative后，每个.middle都会相对于自身父级.col1进行居中定位，悬停不同图片时，文本框就能准确显示在对应图片的中心位置。

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