Html CSS：网格中的部分透明图像显示它们后面的相邻图像，如何让它们完全隐藏在自己的div之外？

我有一个网格，有2行，每行4个图像。我试着制作一个效果，它们从放大开始，有点暗（为此，我将背景设置为黑色，不透明度设置为0.7），当你将鼠标悬停在它们上面时，它们会缩小并变得完全不透明

我的效果在很大程度上是有效的，我唯一的问题是，当不透明度最初设置为0.7时，所有图像都会显示周围图像的隐藏溢出

以下是我到目前为止实施的内容：

#图库{
高度：600px；
}
.图片{
身高：100%；
显示：网格；
网格模板行：1fr 1fr；
溢出：隐藏；
}
.行{
显示：网格；
网格模板柱：1fr 1fr 1fr 1fr；
}
.img{
宽度：100%；
身高：100%；
背景尺寸：封面！重要；
背景重复：不重复！重要；
背景位置：中-中！重要；
显示：内联块；
转换：比例（1.15）；
不透明度：0.7；
背景色：#000；
背景：url（'https://pixabay.com/get/ea30b70c2cf1073ed1534705fb094f91e374e3d018ac104496f3c57ba3efb1b0/superb-thread-3563456_1920.jpg');
}
.img:悬停{
不透明度：1；
转换：比例（1.03）；
过渡：所有0.3秒的缓进缓出；
}

<代码> > p>您可以简单地考虑一个附加的容器：<代码>溢出：隐藏< /代码>：


#图库{
高度：600px；
}
.图片{
身高：100%；
显示：网格；
网格模板行：1fr 1fr；
溢出：隐藏；
}
.行{
显示：网格；
网格模板柱：1fr 1fr 1fr 1fr；
}
.行>分区{
溢出：隐藏；
}
.img{
宽度：100%；
身高：100%；
背景尺寸：封面！重要；
背景重复：不重复！重要；
背景位置：中-中！重要；
显示：内联块；
转换：比例（1.15）；
不透明度：0.7；
背景色：#000；
背景：url（'https://picsum.photos/2000/1000?image=1069');
}
.img:悬停{
不透明度：1；
转换：比例（1.03）；
过渡：所有0.3秒的缓进缓出；
背景：url（'https://picsum.photos/2000/1000?image=1069');
}
@MazinAbdulKarim通过添加额外的容器，比例将隐藏它们，因此元素不再是同级元素，但每个元素都有自己的容器，此容器隐藏溢出，这些容器是您的新网格项