CSS 网格和变换：图像溢出和重叠

Question

我还是一个初学者，很抱歉，如果这是一个愚蠢的问题，我会尽量保持简短和具体。

因此，我想使用 CSS 网格显示和变换比例属性在图像网格中创建缩小效果。

我得到的结果与期望的结果不同，我将在代码后面发布两者的图像。

这是我使用过的代码：

.meals-gallery {
  background-color: #000;
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(2, 1fr);
  overflow: hidden;
  padding: 0;
}

.meals-gallery img {
  opacity: 0.7;
  transform: scale(1.15);
  transition: 0.5s;
  width: 100%;
}

.meals-gallery img:hover {
  opacity: 1;
  transform: scale(1.03);
}

<section class="meals-gallery">
  <img src="http://placeholder.pics/svg/600x500" alt="">
  <img src="http://placeholder.pics/svg/600x500" alt="">
  <img src="http://placeholder.pics/svg/600x500" alt="">
  <img src="http://placeholder.pics/svg/600x500" alt="">
  <img src="http://placeholder.pics/svg/600x500" alt="">
  <img src="http://placeholder.pics/svg/600x500" alt="">
  <img src="http://placeholder.pics/svg/600x500" alt="">
  <img src="http://placeholder.pics/svg/600x500" alt="">
</section>

图像在不透明度为 70% 时重叠，因此它们看起来很难看，即使我添加了要隐藏的溢出属性。

这是想要的效果：

这就是我所取得的成就：

先感谢您。

Answer 1

我认为我们需要将img元素包装在容器中，例如 a div，并overflow: hidden;在div. 然后我们就可以将transform: scale元素img放在div:hover. 我想这就是你想要的效果：

.meals-gallery {
  background-color: #000;
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(2, 1fr);
  overflow: hidden;
  padding: 0;
}

.meals-gallery > div {
  overflow: hidden;
  position: relative;
}

.meals-gallery img {
  opacity: 0.7;
  transform: scale(2);
  transform-origin: 50% 50%;
  transition: all 0.5s ease-in-out;
  display: block;
  width: 100%;
}

.meals-gallery div:hover img {
  opacity: 1;
  transform: scale(1.1);
}

<section class="meals-gallery">
  <div><img src="http://placeholder.pics/svg/600x500" alt=""></div>
  <div><img src="http://placeholder.pics/svg/600x500" alt=""></div>
  <div><img src="http://placeholder.pics/svg/600x500" alt=""></div>
  <div><img src="http://placeholder.pics/svg/600x500" alt=""></div>
  <div><img src="http://placeholder.pics/svg/600x500" alt=""></div>
  <div><img src="http://placeholder.pics/svg/600x500" alt=""></div>
  <div><img src="http://placeholder.pics/svg/600x500" alt=""></div>
  <div><img src="http://placeholder.pics/svg/600x500" alt=""></div>
</section>