如何实现元素缩放时不挤压后续元素？HTML/CSS技术求助

问题场景 #

开发的网页中，#games_grid元素内的游戏胶囊图片在鼠标悬停时会放大，导致网格向下扩展，进而推动页面底部的footer下移。网格背景设为橙色便于观察效果。

需求 #

• Footer及其他页面元素在图片放大时保持位置不变
• 放大的图片需溢出到footer的边距区域
• 网格高度必须根据图片宽度自动保持宽高比，不能手动设置固定高度
• 仅允许使用HTML和CSS解决问题

已尝试的无效方案 #

• 将网格设为绝对定位：导致网格单元格宽度无法继承body宽度，且无法实现随body宽度自适应的高度容器
• 通过过渡grid-template-rows抵消图片放大影响：无任何效果

相关代码 #

HTML代码 #

<main>
    <div>
        <div class="title_stripe">
            <h2>Video Games</h2>
        </div>
        <div id="games_grid">
            <div class="game_box">
                <a href="mrstretch.html">
                    <img src="images/LibraryCapsule.png" alt="Mr. Stretch cover art">
                </a>
                <div class="description_card">
                    <h3>Mr. Stretch and the Stolen Fortune</h3>
                    <p>Stretch from wall to treasure in this exciting puzzle-platformer collectathon!</p>
                    <p class="status">currently in development</p>
                </div>
            </div>
            <div class="game_box">
                <a href="#">
                    <img src="images/BoulderManiacE.png" alt="Boulder Maniac cover art">
                </a>
                <div class="description_card">
                    <h3>Boulder Maniac</h3>
                    <p>Tumble, roll, and blast, in this chaotic and unique mining arcade!</p>
                    <p class="status"> planned developement</p>
                </div>
            </div>
            <div class="game_box"></div>
            <div class="game_box"></div>
            <div class="game_box"></div>
            <div class="game_box"></div>
        </div>
    </div>
</main>

当前CSS代码 #

#games_grid{
    display:grid;
    grid-template-columns: repeat(6, 25%);
    overflow: scroll;
    overflow-y: hidden;
    transform: rotatex(180deg);
}
#games_grid a{
    margin:0;
}
.game_box{
    background-color: #df5526;
    transform: rotatex(180deg);
    width: 100%;
    z-index: 2;
    transition: width .2s, z-index 0s .2s;
}

/*These are placeholders for future games*/
.game_box:nth-of-type(3){
    background-color: #ffac15;
}
.game_box:nth-of-type(5){
    background-color: #ffac15;
}

.game_box img{
    width:100%;
    display: block;
    z-index: 3;
    opacity: 100%;
    transition: opacity 2s;
}

.game_box:hover{
    z-index: 4;
    width: 110%;
    transition: width 1s, z-index 0s 0s;
}

.game_box img:hover{
    opacity: 85%;
    z-index: 4;
}
.game_box:hover > .description_card{
    right: -60%;
    transition: right 1s;
}
.description_card{
    background-color: #233532;
    border-radius: 15px;
    padding: 20px;
    width: 50%;
    margin-left: auto;
    right: 10%;
    margin-top: -150%;
    position: absolute;
    z-index: -2;
    transition: right .5s;
}

尝试过的无效CSS代码 #

#games_grid{
   grid-template-rows: 110%; /*Derived from the height that the image will grow to*/
   transition: grid-template-rows .2s;/*Same duration as the images shrinkage when it is no longer being hovered over*/
}
.game_box:hover ~ #games_grid{
    grid-template-rows: 100%;/*Forces height to match that of the images new height*/
    transition: grid-template-rows 1s;/*Matches the images hover growth speed*/
{

解决方案 #

核心思路：放弃通过修改容器宽度实现图片放大的方式，改用transform: scale()对图片进行缩放——这种方式不会改变容器的实际尺寸，因此不会撑开网格高度，也就不会推动footer下移；同时调整溢出和层级设置，让放大的图片能正常溢出到footer区域。

修改后的关键CSS代码如下：

/* 调整#games_grid的溢出设置，允许垂直方向内容溢出 */
#games_grid {
    display:grid;
    grid-template-columns: repeat(6, 25%);
    overflow-x: scroll; /* 仅保留横向滚动 */
    overflow-y: visible; /* 允许垂直方向溢出 */
    transform: rotatex(180deg);
}

/* 修改.game_box的基础样式，允许内容溢出并确保层级生效 */
.game_box{
    background-color: #df5526;
    transform: rotatex(180deg);
    width: 100%;
    z-index: 2;
    transition: z-index 0s .2s; /* 移除width过渡 */
    overflow: visible; /* 允许内容溢出容器 */
    position: relative; /* 确保z-index和绝对定位元素的层级生效 */
}

/* 调整.game_box的hover逻辑，移除宽度变化 */
.game_box:hover{
    z-index: 4;
    transition: z-index 0s 0s;
}

/* 给图片添加缩放过渡效果 */
.game_box img{
    width:100%;
    display: block;
    z-index: 3;
    opacity: 100%;
    transition: opacity 2s, transform 1s; /* 添加transform过渡 */
    transform-origin: center; /* 设置缩放原点为图片中心，可选 */
}

/* 鼠标悬停时对图片应用缩放 */
.game_box:hover img {
    opacity: 85%;
    z-index: 4;
    transform: scale(1.1); /* 放大1.1倍，可根据需求调整 */
}

说明 #

• 使用transform: scale()放大图片，不会改变.game_box和#games_grid的实际尺寸，因此网格高度不会被撑开，footer位置保持稳定
• 设置overflow-y: visible和overflow: visible，确保放大的图片能溢出到footer的边距区域
• 保留原有的透明度过渡和层级设置，不影响其他交互效果

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