JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col-xl-3 col-lg-3 col-md-3 col-sm-6 col-6 offset-xl-3 offset-lg-3 offset-md-3">
                    <a href="single-item.html" class="item-link">
                        <div class="product">
                            <img src="https://cdn.shopify.com/s/files/1/2035/3607/products/[email protected]?v=1520568786" alt="SY235-00X-001" class="product">
                        </div>
                        <div class="product-description">
                           <h1 class="product-name">ФУТБОЛКА С ПРИНТОМ FIND YOU WAY</h1>
                        </div>
                    </a>
                </div>

SCSS

.product{
    width: 100%;
    height: 250px;
    position: relative;
}
.product-description{
    position: absolute;
    height: 0px;
    overflow: hidden;
    width: 258px;
    background: rgba(225, 225, 225, 0.7);
    bottom: 0;
    transition: width 0.8s, height 0.5s;
}

.product-name{
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    font-size: 14px;
    color: #000000;
}
.item-link {
  display: block;
}
.item-link:hover .product-description{
    height: 70px;
}