Html 仅在y索引中溢出图像

我有一个迷你图片库，我想使用它根据单击的图片切换内容。将鼠标悬停在图像上时，它会略微放大。我的问题是，当缩放时，我想隐藏页面的溢出，但仍然在y方向显示溢出。我尝试过溢出-x:hidden，溢出-y:visible，但是y-overflow只出现在底部，滚动条也会出现

#图像{
高度：70vh；
宽度：100%；
显示器：flex；
柔性包装：包装；
溢出x：隐藏；
溢出y：可见；
}
#图像，图像{
宽度：50%；
高度：35vh；
过渡：0.5s；
光标：指针；
z指数：1；
}
#图片。图片：悬停{
转换：比例（1.1）；
z指数：10；
}
#图像。图像img{
宽度：100%；
身高：100%；
对象匹配：覆盖；
}

---

您需要将缩放属性添加到图像，而不是外部div

#图像{
高度：70vh；
宽度：100%；
显示器：flex；
柔性包装：包装；
溢出x：隐藏；
溢出y：可见；
}
#图像，图像{
宽度：49%；
高度：35vh；
过渡：0.5s；
光标：指针；
z指数：1；
溢出：隐藏；
位置：相对位置；
边框：1px实心#000；
}
#图像。图像：悬停img{
转换：比例（1.1）；
z指数：10；
位置：绝对位置；
左：0；
过渡：.2s；
}
#图像。图像img{
宽度：100%；
身高：100%；
对象匹配：覆盖；
}

---

从图像中删除溢出css并将其添加到正文中：

body {
   width: 100%;
   overflow: hidden;
}

---

你能给我们提供一个工作的例子吗？谢谢，但我希望图像能够在周围的图像上缩放，而不仅仅是在它自己的框内放大。