Why is image not considered for grid cell height? Only Html and CSS

Question

I am trying to get a little description card to pop out from behind an image in a div within a grid. I got the transitions working well, but I need to get the card behind the image.

This is the relevant html:

<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>Description</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>Description</p>
      <p class="status"> planned developement</p>
    </div>
  </div>
</div>

this is the css:

.description_card {
  width: 50%;
  margin-left: auto;
  margin-right: 10%;
  margin-top: -150%;
  position: relative;
  z-index: -2;
}

.game_box {
  background-color: #df5526;
  width: 100%;
  z-index: 2;
}

#games_grid {
  display: grid;
  grid-template-columns: repeat(5, 25%);
  overflow: scroll;
  overflow-y: hidden;
}

When I do that, it makes the div height size relative to the vertical position of the card, causing the image that it is behind to overflow off the div, becoming hidden by the grid's overflow rule. What it looks like with negative margin-top displacement. Commenting out the description card makes the grid height match the image height.

What I want is for the div Hight to be decided solely by the image height, not being influenced by the position of the description whatsoever. I cannot set the height manually, as it needs to scale along with the image. I can only use html and CSS.

I tried adding bottom padding to the div that has the same relative size as the card displacement, expecting that this would compensate for the displacement of the div's bottom. This did prevent overflow, but the padding goes farther than expected. The padding grows as the page is made narrower, the access eventually becoming larger even than the image, making the page much longer than it should be.

Answer 1

By using absolute positioning, the card can be positioned without influencing the size of the div:

    .description_card{
        width: 50%;
        right: 10%;
        position: absolute;
        transition: right .5s;
    }

This also makes the code shorter. :)

Answer 2

Since you are using a grid layout , you can have more than one element inside a single cell defined by the grid. they will be drawn on top of each others. Make your .game_box a grid too to easily layout text and image on the same area!.

transform and :hover can make one popup . a little transition can make it a bit sexy.

margin-top is of no help here, 100% is calculated from the width of the parent , not the element itself ! it would work for a square.

Here is an example snippet that you can run to see what it does. You can inspire yourself from it. Do not hesitate to ask more question ;) in the comments

#games_grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(250px,25%));
  width:100%;
  overflow: scroll;
  overflow-y: hidden;
}


.game_box {
  background-color: #df5526;
  display: grid;
  width:100%;
  overflow:hidden;
}
.game_box>a,
.description_card {
grid-row:1;
grid-column:1;
grid-area: "single-cell";
  
}
.game_box>a>img {
  display:block;
  width:100%;
}


/* popup */
.description_card {
background-color:white;
  text-align:center;
  transform:translateY(100%);
  transition:transform .15s, background-color .5s

}
.game_box:hover .description_card {
  background-color: #df5526;
  transform:translateY(0);
}

<div id="games_grid">
  <div class="game_box">
    <a href="mrstretch.html">
      <img src="https://dummyimage.com/300x200/1a6&text=images/LibraryCapsule.png" alt="Mr. Stretch cover art">
    </a>
    <div class="description_card">
      <h3>Mr. Stretch and the Stolen Fortune</h3>
      <p>Description</p>
      <p class="status">currently in development</p>
    </div>
  </div>
  <div class="game_box">
    <a href="#">
      <img src="https://dummyimage.com/300x200/a28&text=images/BoulderManiacE.png" alt="Boulder Maniac cover art">
    </a>
    <div class="description_card">
      <h3>Boulder Maniac</h3>
      <p>Description</p>
      <p class="status"> planned developement</p>
    </div>
  </div>
</div>