Adaptable grid of images with not the same size

Question

I don't really know if this has a solution, but would be awesome if someone knew it!

I just wanna use CSS and javascript if needed.

What I have:

A grid of images, no white space whatsoever. Actually I implemented inside responsive columns with column-count

What I want

Each image is 100% size inside the column, I want them to be bigger when you hover them. What happens is that they grow but they do behind everything (you can see here) If i just put every image with no columns, just being displayed inline-block, then when an image grows it leaves white space in the rest of the row.

Is there a way so every image can stick together (no white space) even when one of them grows?

Thanks!!

Answer 1

You can try:

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

to bring the bigger images to the front.