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 o...