My article card has a transition on the top attribute of the info div, which is supposed to be smooth and last for 0.3 seconds. However, the description suddenly appears during this transition. I'm trying to figure out why this is happening and how to fix it. Any ideas?
.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>