hover that moves up a div card but smoothly-CodePudding

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 >
  <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

CodePudding user response：

This is because you have specified the transition only in the :hover block of code, meaning the transition timing is not specified until after the hover has already occurred.

Specify the transition outside the :hover block, like this for example:

.card {
 transition: 1s
}

.card:hover {
 position: relative; 
 top: -10px;
}

CodePudding user response：

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 ></div>

CodePudding user response：

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 >Card</div