Issue
I'm trying to get the below code to transition smoothly from bottom: 0 to top: 0. I understand that transitions only work with the same attribute, but I'm at a loss on how to do it smoothly right now. Here's the code in question:
.portCard * {
max-width: 100%;
transition: .35s .35s transform cubic-bezier(.1,.72,.4,.97);
}
.portCard {
position: relative;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
max-width: 250px;
}
.portCardContent {
position: absolute;
left: 50%;
transform: translate(-50%, 0px);
width: 100%;
text-align: center;
background-color: #86B971;
z-index: 1;
bottom: 0;
height: auto;
}
.portCard:hover .portCardContent {
top: 0;
bottom: auto;
}
.portCardTitle {
font-size: 1.2em;
font-weight: 700;
}
.portCardText {
font-size: .8em;
}
.portCardLink {
display: none;
}
<div class="portCard">
<img src="https://images.unsplash.com/photo-1586511925558-a4c6376fe65f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=60" alt="">
<div class="portCardContent">
<h3 class="portCardTitle">
Make your <span>choice</span> right now!
</h3>
<p class="portCardText">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia quisquam doloremque nostrum laboriosam, blanditiis libero corporis nulla a aut?</p>
<a href="#" class="portCardLink">
<span>Learn How</span>
</a>
</div>
</div>
Solution
Combine top (or bottom) with translate. In your case, use bottom: 100%
which will make your item out of the container but you rectify this using translatey(100%)
.portCard * {
max-width: 100%;
}
.portCard {
position: relative;
overflow: hidden;
max-width: 250px;
}
.portCard img {
display: block;
}
.portCardContent {
position: absolute;
left: 0;
right: 0;
text-align: center;
background-color: #86B971;
z-index: 1;
bottom: 0;
transition: .5s;
}
.portCard:hover .portCardContent {
translate: 0 100%;
bottom: 100%;
}
.portCardTitle {
font-size: 1.2em;
font-weight: 700;
}
.portCardText {
font-size: .8em;
}
.portCardLink {
display: none;
}
<div class="portCard">
<img src="https://images.unsplash.com/photo-1586511925558-a4c6376fe65f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=60" alt="">
<div class="portCardContent">
<h3 class="portCardTitle">
Make your <span>choice</span> right now!
</h3>
<p class="portCardText">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia quisquam doloremque nostrum laboriosam, blanditiis libero corporis nulla a aut?</p>
<a href="#" class="portCardLink">
<span>Learn How</span>
</a>
</div>
</div>
Answered By - Temani Afif
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.