reverse an animation after div:hover

user_667903 0
Viewed 13

How do I:

  • make the hover effect of margin-top: -10px stay present when the mouse stays hovered over the element
  • reverse the animation smoothly when the mouse moves out of a hover position?

Help appreciated, please.

@keyframes shift-up {
    from {margin-top: 0px;}
    to {margin-top: -10px;}
}
.owl-stage {padding-top: 10px;}
.owl-item:hover {
    animation-name: shift-up;
    animation-duration: 0.5s;
}
.owl-item {
  width: 100px;
  height: 100px;
  background-color: blue;
}
<div class="owl-stage">
  <div class="owl-item">
  
  </div>
</div>

css-animations
1 Answers

You can use transition instead of animation

.owl-stage {padding-top: 10px;}
.owl-item:hover {
    margin-top: -10px;
}
.owl-item {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: margin-top 0.5s ease-in-out;
}
<div class="owl-stage">
      <div class="owl-item">
      
      </div>
    </div>

user_62142100
Related