小编Poc*_*ean的帖子

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

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

因此，我想使用 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);
}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

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

这是想要的效果：

想要的图像效果