Make div slide up when another div is hovered on - html

Question

I have a block called case-card which consists of a child div called case-card__wrapper that houses text.
On case-card hover, I want the case-card__wrapper to move up slightly. Not in one action, but as transition.
I feel like I have the general idea, but unsure on how to get the transition to work? At the moment, it just phases from one spot to another:
.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 trying to do this just via CSS. Any ideas?

Answer 1

If you cannot set initial value simply use transfrom. You can also remove position:absolute
.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{
transition: 0.5s;
}
.case-card__title{
font-size: 16px;
}
.case-card:hover .case-card__wrapper {
transform:translateY(-100%);
}
<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>