JSFiddle - React, Tailwind, and code Playground

HTML

<div class="game-item">
        <div class="background" style="background-image: url(http://www.kalyanspb.ru/images/autothumbs/images/cms/data/backgammon-poland-small-22-_sl_600_600.jpg);"></div>
        <div class="name">
            <h3>Нарды <span class="count">2</span></h3>
            <div class="description">
                 Настольная онлайн игра для двух игроков.
                <a href="" class="button green">Играть</a>
            </div>
        </div>

    </div>

CSS

/**************************************************************************/
/* ИГРОВЫЕ БЛОКИ  
/**************************************************************************/
.game-item { width: 255px; height: 200px; position: relative; overflow: hidden; float: left; margin: 10px 0 0 10px; border: solid 1px #e9e9e9; padding: 0px;}
.game-item .background {height: 155px; position: relative;  background-size: cover; top: 0;}
.game-item .name {height:235px; padding: 5%; position: absolute; background: white; font-size:14px; top: 155px;border-color: white;transition: all .5s ease}
.game-item .category {font-size:90%;}
.game-item h3 {padding:0px; margin: 0px 0px 15px 0px; font-size:130%; color: #3a3a42; font-family: sans-serif; font-weight:normal; letter-spacing: 0.08em;}
.game-item .count {display: none;}

.game-item .description {padding:0px; font-size:90%;}
.game-item .description .button{display: block; width:40%; min-width:120px; margin: auto; margin-top:10px;}

.game-item:hover .background{}
.game-item:hover .name{top: 0px; z-index:2; border: solid 1px white}
.game-item:hover .name .count {display: block; float: right; font-size:60%; color:#b4b4b4; border: solid 1px #c5c5c5; border-radius: 50%;  text-align: center; width: 24px; height: 24px; line-height: 24px;}

/***********************************/