hover that moves up a div card but smoothly - html

Question

so I have a div which is a card and content in it. I achieved to make it moves up a bit but the transition property seems to not work.
Here is the HTML code
<div class="card">
<p> Title </p>
</div>
and here is the CSS code
.card:hover {
position: relative;
top: -10px;
transition: 1s;
}
So basically there is multiple cards and it works well every card with the .card class moves up when the mouse is over it, but it moves instantaneously, the transition does not work. Does anyone knows how to fix it? have a great day

Answer 1

This is because you have specified the position and transition only in the :hover block of code, meaning the transition timing is not specified until after the hover has already occurred. In other words, only the item that changes on hover (the top value) should be in the :hover.
Specify the position and transition outside the :hover block, like this for example:
.card {
position: relative;
transition: 1s
}
.card:hover {
top: -10px;
}

Answer 2

You can use transform: translateY
try this
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.box {
border: 1px solid black;
width: 150px;
height: 150px;
cursor: pointer;
transition: all .5s ease-in-out;
}
.box:hover {
transform: translateY(-10px);
}
<div class="box"></div>

Answer 3

Instead of playing with top which requires a positon attribute to move it out of flow, just add a margin to displace the element:
.card:hover {
margin-top: -20px;
margin-bottom: 20px;
transition: 1s;
}
/* for visualization purpose only */
body {
padding-top: 50px;
}
div {
border: 2px solid black;
display: flex;
justify-content: center;
align-items: center;
height: 40vh;
width: 10vw;
}
<div class="card">Card</div