Issue
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>
Answered By - User456
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.