Transition Time in hover

July 2, 2022

So i have this article card ,and when i transition the top attribute of my info div,the transition is indeed 0.3s and smooth, but the description suddenly appears and i would like to change this,any ideas to why is this happening and how to fix it?

.article-card{
    background-image: url(" ")
    -webkit-box-shadow: 0px 0px 20px 1px #919191; 
    box-shadow: 0px 0px 20px 1px #919191;
    width: 30vh;
    height: 40vh;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
}

.article-card-info{
    position: relative;
    top: 18vh;
    height: 10vh;
    background-color: white;
}
.article-card-title{
    color: #1a2434;
    text-align: center;
    padding-top: 2vh;
    font-size: 1rem
}

.article-card-description{
    display: none;
    position: relative;
    top: 10vh;
    text-align: center;
    font-size: 0.6rem;
    font-family: 'Zona Pro Thin';
    font-weight: 1000;
    color: #1a2434;
    margin: 2px;
}

.article-card:hover .article-card-info{
    transition: 0.3s ease;
    height: 15vh;
    top:13vh;
}

.article-card:hover .article-card-description{
    display: block;
    top: 1vh;
    transition: 0.3s ease;
}

<div class="article-card">
    <div class="article-card-info">
          <p class="article-card-title"> Title</p>
          <p class="article-card-description"> Description </p> 
     </div>
</div>

>Solution :

You can use the opacity property to make the description appear smoothly.

.article-card{
    background-image: url(" ")
    -webkit-box-shadow: 0px 0px 20px 1px #919191; 
    box-shadow: 0px 0px 20px 1px #919191;
    width: 30vh;
    height: 40vh;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
}

.article-card-info{
    position: relative;
    top: 18vh;
    height: 10vh;
    background-color: white;
}
.article-card-title{
    color: #1a2434;
    text-align: center;
    padding-top: 2vh;
    font-size: 1rem
}

.article-card-description{
    position: relative;
    top: 10vh;
    text-align: center;
    font-size: 0.6rem;
    font-family: 'Zona Pro Thin';
    font-weight: 1000;
    color: #1a2434;
    margin: 2px;
    opacity: 0;
    transition: 0.3s ease;
}

.article-card:hover .article-card-info{
    transition: 0.3s ease;
    height: 15vh;
    top:13vh;
}

.article-card:hover .article-card-description{
    top: 1vh;
    opacity: 1;
}

<div class="article-card">
    <div class="article-card-info">
          <p class="article-card-title"> Title</p>
          <p class="article-card-description"> Description </p> 
     </div>
</div>