Problems with image hover zoom transition - html

Question

I'm using this image zoom transition when i hover over an image. It's seems to work perfectly sometimes and sometimes it moves a little bit after zooming. I just can't figure out why..
Can anyone help me out why this happens
header {
width: 65.277777777777778%;
max-width: 1400px;
margin: 0 auto;
overflow: auto;
margin-bottom: 6%;
}
.container {
position: relative;
overflow: hidden;
/* height: 200px;
width: 200px; */
width: 100%;
}
.container img {
position: relative;
height: 100%;
width: 100%;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: transform;
transition: transform;
-webkit-transition-duration: 1s;
transition-duration: 1s;
display: flex;
}
.container:hover img {
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: transform;
transition: transform;
-webkit-transition-duration: 1s;
transition-duration: 1s;
}
<header>
<div class="container">
<img src="https://pixabay.com/static/uploads/photo/2016/08/11/08/43/potatoes-1585060__340.jpg" alt="" />
</div>
</header>

Answer 1

Give this a try and see if it's more consistent for you. It works well for me, and I haven't noticed any issues in the months it's been implemented:
.container img {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.container img:hover {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
See if this does the trick, if it's something you're interested in. Either way, let me know!