When hovering over a particular div, a child div expands from the bottom to reveal its hidden contents. However, there is an issue where the parent div seems to shrink slightly from the bottom, causing elements below it to shift upward.
For a visual demonstration of this behavior, check out this fiddle.
body {
color:white;
}
.game-thumbnail {
background-color: rgba(23, 30, 26, 0.95);
margin-top:-15%;
position:relative;
z-index:1;
padding:0.5em 1em;
transition: margin 0.333s ease-out, padding 0.333s ease-out;
}
.game-entry {
cursor:pointer;
width:66vw;
max-width:500px;
}
.game-entry img {
width:100%;
position:relative;
}
.game-entry:hover .game-thumbnail {
margin-top:-30%;
padding-bottom:15%;
bottom:0;
}
.game-entry:hover .moreinfo {
opacity:1;
transition:opacity ease-out;
transition-duration: 0.4s;
transition-delay: 0.3s;
}
.moreinfo {
opacity:0;
transition-duration: 0.2s;
transition-delay: 0s;
background-color:#171e1a;
width:25%;
padding:5px;
text-align:center;
position:relative;
float:right;
}<div class="container-fluid my-0 px-5 py-1">
<div class="container-fluid p-2 d-none d-md-block">
<div class="row">
<div class="col-sm-auto p-2">
<div class="container-fluid p-0 m-0 game-entry">
<img src="https://i.imgur.com/cxLk553.png">
<div class="container-fluid game-thumbnail">
<h4>My Dog's Tale</h4>
<p>Follow the adventures of My Dog</p>
<div class="moreinfo">More info...</div>
</div>
</div>
</div>
</div>
</div>
<h1 class="my-4" style="color:black;">This should not go up</h1>I'm contemplating adjusting the positioning of the text upwards and increasing the size of the div at the top, but I'm encountering issues with the background getting obscured by the image.
While I prefer a CSS3-only solution, I am open to suggestions that involve jQuery as well.