css - 大小不一的适应性图像网格

Question

我真的不知道这是否有解决方案，但如果有人知道就太棒了!

我只想在需要时使用 CSS 和 javascript。

我有什么:

图像网格，没有任何空白。实际上我在响应式列中实现了 column-count

我想要什么

每张图片在列内都是 100% 大小，我希望它们在悬停时变大。发生的事情是他们成长，但他们在背后做一切(你可以看到 here ) 如果我只是将每个图像都没有列，只是以行内 block 显示，那么当图像增长时，它会在行的其余部分留下空白。

有没有一种方法可以让每张图片都粘在一起(没有空白)，即使其中一张图片变大了？

谢谢!!

Answer 1

你可以试试:

a:hover img, a:focus img {
  position: relative;
  z-index: 1;
}

将更大的图像放在前面。