Search code examples
csshovertransition

roblem making an image scale bigger when hovering with the mouse on top of it. (I use ease-in-out but in the "out" it is not slow as I want it to be)

When I hover on the div that contains the image, it scales a bit bigger slowly as I want it but, as soon as I leave that div with the mouse, the image goes back to where it was without an slow and smooth transition. Why?

.stage:hover {
    img {
      transition: all .3s ease-in-out;
      transform: scale(1.03);
    }
  }
Solution

  • When you stop hovering the img stops having a transition setting so it just leaps back to the initial scale.

    Try putting the transition on the actual img:

    .stage {
  background-color: gray;
  /* just to show the extent of the stage */
}

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

.stage:hover img {
  transform: scale(1.03);
}
    <div class="stage"><img src="https://picsum.photos/id/1015/200/300"></div>