JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
    <div class="img">
        <img src="http://placehold.it/350x250" alt="">
    </div>
    <div class="img-desc">
        Описание...
    </div>
</div>

CSS

.block {
    position: relative;
    width: 350px;
    overflow: hidden;
}
.img img {
    display: block;
}
.img-desc {
    width: 100%;
    background-color: rgba(35, 35, 35, 0.74);
    position: absolute;
    left: 0;
    bottom: -100px;
    padding: 10px 20px;
    opacity: 0;
    box-sizing: border-box;
    transition: bottom 0.6s, opacity 0.8s;
}
.block:hover .img-desc {
    opacity: 1;
    bottom: 0px;
}