CODEWITHSUNDEEP
htmlcsshoverpositioncard
Sundaee
Sundaee

Reputation: 11

hover that moves up a div card but smoothly

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

Upvotes: 1

Views: 4571

Answers (4)

Whelmer Neto
Whelmer Neto

Reputation: 1

@Mohamad's answer is on point, but if you want smoother animation and a shorter movement, try that:

.box {
  transition: all .3s ease-in-out;
}

.box:hover {
  transform: translateY(-5px);
}

Upvotes: 0

Henry Floyd
Henry Floyd

Reputation: 124

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

Upvotes: 3

Mohamad
Mohamad

Reputation: 608

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>

Upvotes: 1

tacoshy
tacoshy

Reputation: 13012

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

Upvotes: 0

Related Questions