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

Question

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

所以，我想使用CSS网格显示和变换缩放属性在图像网格中创建缩小效果。

我得到的结果与期望的结果有关，我会在代码之后发布两者的图像。

这是我使用过的代码：

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

图像在70％不透明度时重叠，所以它们看起来很难看，即使我已经添加了要隐藏的溢出属性..

这是预期的效果：

这就是我所取得的成就：

提前谢谢。

Answer 1

我认为我们需要将img元素包装在容器中，例如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>

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    let offset = scrollView.contentOffset.y
    if offset <= 0 {
        // scroll view is at the top, disable shadow
    } else {
        // scroll view has positive offset, enable shadow
    }
    print(offset) // if you aren't familiar with how it works
}

Answer 2

从此blog

  

grid-gap属性在我的列和10px行之间创建一个间隙。   此属性是grid-column-gap和grid-row-gap的简写   您可以单独设置这些值。

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

.meals-gallery img {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 10px;
  width: 100%;
  background-color: #fff;
  color: #444;
}

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