小编Vec*_*ing的帖子

我正在尝试制作一个使用CSS动画的图库,但我有一些奇怪的效果出现了.我有一个较小的缩略图来开始,我希望它在我悬停在它上面时缩放到两倍大小.该部分有效,但它也会向左移动,并最终越过屏幕边缘.我该怎么做才能解决这个问题？

<style>
    .zoom {
        transition:1s ease-in-out;
    }
    .zoom:hover {
        transform:scale(2);
    }
</style>

<div class="content">
    <div class="zoom">
        <img alt="Paperplane" src="Paperplane.png" style="width: 200px; height: 62px">
        <br> <span class="caption">A paper plane</span>
    </div>
</div>

演示