How can I adjust the size of an element without causing the other elements to move around on the

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.

Answer №1

By utilizing scale instead of width, users have the flexibility to adjust image height and width without impacting the grid dimensions, thus avoiding downward expansion of the page.

Furthermore, incorporating padding on the top and bottom of the grid and switching overflow-y to visible, enables the overflow content to be displayed within the margins.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Elevate your web design by transitioning from Bootstrap 4 to Bootstrap 5

Should I upgrade a large project from Bootstrap 4 to version 5? Will it require extensive changes in each file? After updating my project, many components have stopped working: Dropdowns Accordions and more Is this a common issue experienced by everyo ...

Creating Consistent Button Padding in Material UI

I am working with a series of Material UI buttons that are defined as follows: <Button className={classes.button}>Edit</Button> <Button className={classes.button}>Duplicate</Button> <hr /> <Button c ...

Drupal 7 FlexSlider - alignment issue with image placement

I am encountering an issue with the Flexslider module on my Drupal 7 website. I have created a simple slider that displays 3 photos. I enabled touch screen functionality for the slider, and everything seems to be working fine except for one problem - all t ...

Conceal excessive content on elements set in a stationary position

How can we prevent overflow of a fixed div within a container? Initially, I attempted nesting fixed elements inside each other, but that did not solve the issue. The only solution that comes to mind is using "inverted" masks: other fixed divs that hide eve ...

Is it possible to incorporate multiple searchBoxes on my website using the Google Maps API?

I am currently working on creating an origin and destination menu for users to select locations in each input. The goal is to add a marker to the map for each input and then calculate the distance between them. So far, I have successfully added a map with ...

Styling elements with CSS to display inline blocks next to each other while taking up the full

I am facing a challenge with two text blocks of varying lengths. The left block contains short text while the right block may have lengthy content. Both blocks need to be displayed side by side, occupying 100% of the parent's width exactly. For a sim ...

Tips for choosing a specific cell in a table

I currently have a total of 14 cells that have been generated. Is there a way for me to individually select and manipulate a specific cell out of the 14? I am looking to make only one cell unique, while leaving the rest to be displayed as they are in the ...

Tips for accessing values from a bs4 result set in Beautiful Soup?

Is there a way to extract all the title values from this bs4 result set? [<span class="zaman" title="16.3.2022 15:22:44">1 hf.</span>, <span class="hide zaman pull-right ml-5 mt--1">( Message Deleted )</sp ...

Is there a way to choose the preceding element in Selenium depending on a specific condition?

In my HTML code below: <div class="row"> <div><span class="checkbox"></span></div> <a title="something"></div> </div> <div class="row"> <div><span ...

Can you identify the origin of the inclusion of a .php file?

Is there a way to automatically determine if a PHP script is being accessed directly as an HTML page, used as a JavaScript file, or utilized as a CSS Stylesheet? I'm looking for a solution that doesn't involve GET variables or setting a flag wit ...

What is the best way to ensure that a <label> remains vertically aligned with its <form>?

I'm struggling to incorporate their suggestions into my design. How can I align my label to the left of my input field on the same line? Also, I'm a beginner in coding so please excuse any mistakes in my code: body { background-color: #f5f ...

Creating an HTML Canvas using an AngularJS template

I am facing an issue with rendering html elements on a canvas using html2canvas JS. I am utilizing AngularJS for data binding on the html page, but unfortunately, the dynamic data is not showing up on the canvas generated from these html elements. For inst ...

Retrieve an integer value from an HTML form

I need to extract an integer value from an HTML form using Python. Here is the code I tried: form = cgi.FieldStorage() if not form.has_key("id"): error_pop("There is no id in this form","The format of the request is not correct") id = ...

Is there a more efficient method for creating HTML with coffeescript / jQuery besides using strings?

Today marks my first attempt at creating a "answer your own question" post, so I hope I am on the right track. The burning question in my mind was, "Is there a more efficient way to generate HTML with jQuery rather than using tag strings?" My goal is to c ...

Generate a single-page PDF document mirroring the content of a website

I'm facing a dilemma. I need to generate a one-page PDF file without any gaps between the pages. Despite trying numerous plugins, add-ons, scripts, and software, all of them produce multiple pages. What I really require is to have all the pages in a s ...

Concealing a Div element without the use of Jquery or JavaScript

I have an Upper and Lower div in my HTML code. I am trying to display the Lower div only if the Upper div is present, otherwise hide it. Is there a way to achieve this using CSS without using Jquery or Javascript? Note: No modifications should be made t ...

What steps can I take to prevent a css-generated svg file from occupying more space than the original image? My wave appears to be 239px tall, while the svg file is a massive 1500px in height

I utilized an online tool to generate custom SVG CSS at this link: Upon implementing it on my webpage, the rendering seems correct in terms of height and width. However, upon inspecting the page, I noticed that the SVG file dimensions are 1512px by 1512px ...

An alternative to PHP's exec function in Node.js

I am interested in developing a piece of software using C (such as prime number factorization) and hosting it on my web server with Node.js. Following that, I would like to create an HTML document containing a form and a button. Upon clicking the button, ...

Tips for connecting a href to a div id using JQuery for a parallax slider

I'm currently working on the jQuery slider known as Sequence Master Parallax. My goal is to incorporate a menu at the top that allows users to navigate to each slide. However, I am encountering difficulties in linking the href to the div id. I am unsu ...

Using HTML classes to align text with colored letters in the center

I'm attempting to alter the colors of individual letters within a sentence using html and css. After conducting some research, I came across this method: Here is the html and css code snippet I used: .green { font-size: 20px; color: #0F3; te ...