Вырасти div контейнер снизу без изменения базовой линии

Question

У меня есть div, который, когда мышь находится над ним, дочерний div раскрывается снизу, раскрывая все его скрытое содержимое. Однако, кажется, что div немного сжимается снизу, поэтому элементы под ним немного поднимаются.

Вот скрипка, показывающая, что именно происходит.

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>

Я думал о том, чтобы просто переместить текст вверх, сделать div больше в верхней части, но фон остается позади изображения.

Хотя я ищу решение только для CSS3, приветствуются решения jQuery.

Answer 1

Когда вы используете margin для настройки позиционирования элемента, это повлияет на DOM-поток остальной части страницы. Вот почему это влияет на расположение элемента ниже.

Я бы посоветовал использовать transform для создания такой анимации. Например, transform: translateY(-30%);. Это переместит элемент "вверх", не влияя на поток DOM.

Смотрите обновленную скрипку здесь .