Html 停止img：将变换悬停在框外进行缩放

悬停时，缩放变换开始与其所在行中的其他图片重叠。我不知道如何防止这种情况，只是让天平保持在它自己的画面内

HTML

<div id="pictures">
    <img src="/pic1.jpg"/>
    <img src="/pic2.jpg"/>
    <img src="/pic3.jpeg"/>
</div>

---

将每个图像包装到它自己的div中，并将

溢出：隐藏
应用到包装div。@Paulie_D Oh所以我不能像上面那样一次只做几个？我这样问是因为会有40张照片之类的。我认为有一种方法比在每张图片周围加一个div更简单。这取决于你是如何编写代码的。如果它是PHP，那么它就是一个
包含问题。如果你用手把它们放进去，那就难多了。变换就是……它使元素变大。这就是你告诉它要做的…就是这样。都是HTML/CSS。我想我会在每一个中添加div。谢谢
#pictures {
    text-align: justify;
    overflow: hidden;
}

#pictures img {
    display: inline-block;
    width: 350px;
    height: 350px;
}

#pictures:after {
    content: '';
    display: inline-block;
    width: 100%;
}

#pictures img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .9s ease-in-out;
    transition: .9s ease-in-out;
}

#pictures img:hover {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}