JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapGame">
                    <div class="main">
                        <img src="img/game.jpg" alt="0" />
                        <div class="puls">
                            <p class="numerPuls">199</p>
                            <p class="titlePuls">пульс игры</p>
                        </div>
                    </div>
                    <div class="focus">
                        <p>некий текст</p>
                        <div class="setup">
                            <input type="button" value="Установить" />
                        </div>
                        <div class="more">
                            <input type="button" value="Подробнее" />
                        </div>
                    </div>
                </div>

CSS

.wrapGame {
    height:150px;
    border:1px solid red;
    overflow:hidden;
}
.main {
    background: skyblue;
}
.focus {
    background:lime;
    position:relative;
    top:300px;
}

JavaScript

$(".main").hover(
    function () {
        $(".focus").stop().animate({ top: "0" }, 1000);
    },
    function () {
        $(".focus").stop().animate({ top: "300px" }, 1000);
    }
);