CSS Scale Animation Also Moves Image To Left?

Answer :

It's not moving to the left. The left edge is moving, however, as is the right. Because your content is left-aligned, it appears to move left.

Demo

You could set the transform origin:

.zoom {
    transition: 1s ease-in-out;
    transform-origin: left top;
    background: pink;
}

Demo

Also consider simply using a less dramatic transform:

transform: scale(1.1);

As isherwood described, the error is due to the fact that .zoom is taking up the full width, not just the visible part.

Another solution would be size .zoom so that it only takes up the amount of space that you want, in this case the width of the image. You can do this by giving it an explicit width.

.zoom {
    transition:1s ease-in-out;
    width:200px;
}

However, since the element still transforms from the middle, it will still go outside of the viewport since it's so close. To remedy this, you could use transform-origin:left or provide enough room on either side so that the scaled version does not go outside of the viewport. I used padding to do so in this demo.

One other note: it's not good to scale things past their default value, scale(1), because they become blurry from being too big. As a result, you could size your elements to width:400px; and give it transform:scale(.5) by default and go to transform:scale(1) on hover and it'd remove this issue.

Demo with all the changes

Also note that embedded styles are bad, you should use the external stylesheet nearly all of the time.