JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
    <div>
        <h1>Нечто</h1>
        <p>Описание крутых мегафич этой штуки</p>
    </div>
</div>
<div class="block">
    <div>
        <h1>Еще что-то</h1>
        <p>Описание крутых мегафич другой штуки</p>
    </div>
</div>

CSS

.block {
    width: 200px;
    height: 150px;
    float: left;
    position: relative;
    margin: 20px;
    border: 2px solid #ccc;
}

.block div {
    height: 20px;
    overflow: hidden;
    position: absolute;
    left: 5px;
    bottom: 5px;
    right: 5px;
    background: rgba(255,224,0,.5);
}

JavaScript

$('.block').hover(
    function() { $(this).children().animate({height: 140}); },
    function() { $(this).children().animate({height: 20}); }
)