Minimal Responsive Image Gallery

[Anonymous]

I’d like to make a simple responsive image gallery, with minimal markup and have created the basic idea in CodePen, but would like to know if there’s a better, or more efficient way to do this.

Here’s what I have so far:

http://codepen.io/msguerra74/pen/pJIGF

I’m not sure why, but there is white space in between the images, so I had to adjust the %’s, but you’ll get the idea what I’m looking for.

Additionally, I’d like the make the images pop up when clicked in a modal “lightbox” style window, but using only CSS if possible.

Hope this all makes sense, and thanks for any help!

[Paulie_D]

You can add float:left to the #gallery img and this will remove all the whitespace. then adjust the percentage to the correct numbers.

[Anonymous]

Thanks, that helped! I have the thumbnails positioned correctly with the appropriate media queries, now I just need to figure out the best way to display them when clicked.

[Author]

Posts