双图片未hover合并显示、hover展开全屏效果及代码问题排查求助

问题分析 #

当前代码存在两个核心问题：

1. 右侧图片hover显示不全：#split-image-2 使用了无效的 object-fit: fit 属性，且hover时未调整图片的 object-position，导致展开后图片位置偏移无法完整显示。
2. 展开时未隐藏另一张图片：仅给hover的section设置 width:100%，但另一张section仍保留 width:50%，flex布局下两者会挤压，无法实现单图全屏的效果。

修改后的完整代码 #

HTML（结构无需改动） #

<div class="main-content">
    <div class="image-section">
        <section id="split-image">
            <img src="./Images/Untitled_Artwork 1.png" id="design-img" />
        </section> 
        <section id="split-image-2">
            <img src="./Images/Untitled_Artwork.png" id="coding-img" />
        </section> 
    </div>
</div>

CSS（关键修改已标注） #

.image-section {
    display: flex;
    width: 100%;
    height: 600px;
    overflow: hidden; /* 新增：确保内部元素超出容器时隐藏 */
}

#split-image, #split-image-2 {
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: all 2s ease; /* 新增：全局添加过渡，保证状态切换平滑 */
}

/* 统一图片样式，确保铺满容器 */
#design-img, #coding-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 初始状态：调整图片位置拼接成完整图 */
#design-img {
    object-position: 110px -25px;
}

#coding-img {
    object-position: -790px -10px;
}

/* hover左侧section的效果 */
#split-image:hover {
    width: 100%;
    cursor: pointer;
}
#split-image:hover ~ #split-image-2 {
    width: 0; /* 隐藏右侧容器 */
}
#split-image:hover #design-img {
    object-position: center; /* 图片居中显示完整内容 */
}

/* hover右侧section的效果 */
#split-image-2:hover {
    width: 100%;
    cursor: pointer;
}
#split-image-2:hover #coding-img {
    object-position: center; /* 图片居中显示完整内容 */
}
#split-image-2:hover + #split-image {
    width: 0; /* 隐藏左侧容器 */
}

代码说明 #

1. 容器基础配置：给.image-section添加width:100%和overflow:hidden，确保容器占满宽度且内部元素超出时自动隐藏。
2. 统一过渡效果：给两个section设置全局transition，避免仅在hover时添加导致过渡不连贯。
3. 图片铺满容器：设置图片width:100%和height:100%，配合object-fit:cover保证图片比例不变，完全填充容器。
4. hover隐藏另一张图：使用CSS兄弟选择器（~和+），当hover其中一个section时，将另一张section的width设为0，实现隐藏效果。
5. 图片完整显示：hover时将图片的object-position设为center，确保图片内容完整居中展示。

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