Currently, I am working on a live web page. You can view it at the following address:
The issue I am facing is with the element just before the body's closing tag, the div "games_grid." When hovering over the game capsule image, it expands, causing the grid to expand downward and pushing the footer down relative to the grid's size. The grid's background-color is orange for better visibility. What I am aiming for is to prevent the footer or any other element from moving when the image expands. Instead, it should overflow the footer's margin. It is crucial that the grid's height is not set manually as it needs to be derived from the image's width to maintain aspect ratio. I am looking for a solution using only CSS and HTML. Here is the HTML code:
<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>
And here is the CSS code:
#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;
}
Various attempts have been made to address this issue, including positioning the grid absolutely. Nevertheless, this prevented the grid from deriving its cell width from the body width, resulting in an unresolvable height issue as it needs to scale with the body's width. I also experimented with transitioning the grid cell size, but this did not produce any noticeable changes.
#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*/
{
If successful, resizing the grid's row technically would offset the image's growth by shrinking the grid's size relative to the image's expansion. Unfortunately, this did not alter the size of the games grid.