I have a block named case-card with a child division called case-card__wrapper that contains text.
When hovering over the case-card, I would like the case-card__wrapper to subtly move upwards in a transition, rather than abruptly jumping from one position to another.
While I believe I understand the concept, I am uncertain about how to properly implement the transition effect. Currently, it appears to simply shift from one location to another without any smoothness:
.case-card {
height: 560px;
width:600px;
color: #ededed;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
transform: translateY(20px);
transition: all .3s ease-in-out;
background-color: #333;
overflow: hidden;
}
.case-card__wrapper{
position: absolute;
transition: 0.5s;
/*top: 0; Don't want to add this because I want the text to be centered in the div and rather not define a number since the div heights may vary */
}
.case-card__title{
font-size: 16px;
}
.case-card:hover .case-card__wrapper {
top: 150px;
}<div class="case-card">
<div class="case-card__wrapper">
<h4 class="case-card__title">Title</h4>
<p class="case-card__subtitle">Subtitle</p>
</div>
</div>I'm attempting to achieve this effect using only CSS. Any suggestions?