Open/close loop when using transition on image

Question

-- people suffering from epilepsy -- DON'T LAUNCH --

I prepared some kind of transition on image (translate + scale when hover). Almost everything works fine, but there is one problem. When I hover image, and drag mouse on the source place (green color), loops (open - close image starts really fast). How to avoid this behaviour?

https://codepen.io/anon/pen/KxmJdK

html, body{
  height: 100%;
  border: 1px solid black;
}

.container{
  border: solid red 1px;
  background-color: green;
}

.center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

img{
  width: 400px;
}

img:hover{
  transform: scale(1.2) translate(30%, 0);
  transition: all .2s ease-in-out;
  box-shadow: 5px 5px 10px black;
}

<div class='center container'>
  <img src='https://images.pexels.com/photos/120049/pexels-photo-120049.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'>
</div>

Answer 1

You can solve this problem with just one little adjustment in css:

.container img {
    display: block;
    width: 400px;
}
.container:hover img {
    transform: scale(1.2) translate(30%, 0);
    transition: all .2s ease-in-out;
    box-shadow: 5px 5px 10px black;
}

Basically u need to add the container into the equation, so it won't care if the mouse leave the image area.

codepen