调整元素大小而不移动以下元素？ HTML/CSS

Question

我正在处理这个网页，它是实时的，所以请通过这个地址查看它：

https://mikey670.github.io/wdd130-MK/muketronics/index.html

我遇到的问题是主体结束标签之前的元素，div“games_grid”当一个鼠标悬停在游戏胶囊图像上时，它会展开，向下推动扩展网格，这会将页脚相对于网格大小向下推。网格背景颜色为橙色，以便您可以更好地看到它。 我想要的是页脚或任何其他元素在图像扩展时不要移动，它应该溢出页脚边距。我无法手动设置网格高度，因为它需要从图像宽度导出，并保持纵横比。只有 css 和 html 这是 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;
        }

我已经尝试过绝对定位网格，但这会阻止它从主体宽度导出单元格宽度，从而形成网格。此尝试修复的另一个问题是，它迫使我使用高度无法定义的包装器，因为它需要根据主体的宽度进行缩放。 我也尝试过像这样转换网格单元大小，但它似乎没有做任何事情。

#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*/
{

如果这确实成功地调整了网格行的大小，理论上它会通过相对于图像增长缩小网格大小来抵消图像的增长。但当然，它并没有改变游戏网格的大小。

Answer 1

使用缩放而不是宽度允许用户缩放图像的高度和宽度而不影响网格大小，从而防止页面向下增长。

除此之外，在网格的顶部和底部添加填充并将overflow-y更改为visible，可以使溢出在边距内可见。