具有不同大小的自适应图像网格

Question

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

如果需要，我只想使用 CSS 和 javascript。

我有什么：

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

我想要什么

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

有没有办法让每张图片即使在其中一张长大时也能粘在一起（没有空白）？

谢谢！！

Answer 1

你可以试试：

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

将较大的图像放在前面。