Как сделать, что бы текст не выходил за блок при отсутствии наведения?

Question

[ferles22]

Всем привет. Есть такой блок. При наведении шторка с текстом поднимается а картинку, но когда наведение убирается, тест сползает вниз? Как сделать, что бы текст уезжал вместе с шторкой?

<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/[e-mail]?v=1520568786" alt="SY235-00X-001" class="product">
                        </div>
                        <div class="product-description">
                           <h1 class="product-name">ФУТБОЛКА С ПРИНТОМ FIND YOU WAY</h1>
                        </div>
                    </a>
                </div>

.product{
    width: 100%;
    height: 250px;
    position: relative;
}
.product-description{
    position: absolute;
    height: 0px;
    width: 258px;
    background: rgba(225, 225, 225, 0.7);
    bottom: 27px;
    -webkit-transition: width 0.8s, height 0.5s;
    -moz-transition: width 0.8s, height 0.5s;
    -o-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:hover .product-description{
    height: 70px;
}

Comments

[snap44]

.product {overflow: hidden;}

[Den Alex Smith]

.product-description {
display: block;
overflow: hidden;
}

[lexx9000]

ещё вариант:



.product-name::before{
content: "ФУТБОЛКА С ПРИНТОМ FIND YOU WAY";
font-family: Roboto;
font-style: normal;
font-weight: 500;
line-height: normal;
font-size: 14px;
color: #000000;
}