50 Creative and Inspiring Thumbnail Galleries
Thumbnail galleries are one of the most common solutions on the web for showcasing multiple images. The efficiency of this tool can’t be beat, it allows for quick browsing and closer inspection when desired.
Whenever I build a thumbnail gallery, I like to look around the web to see what other designers are doing to make theirs unique. Today we’re collected fifty great galleries for you to check out. Along the way, we’ll also discuss some ideas that you can use in your own galleries.
Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.
Landing Pages & Email
Logos, Print & Mockups
PowerPoint & Keynote
Ditch the Margins
Whoa says thumbnails have to be spread out? These sites decided to embrace closeness and squish the pictures all up against each other. The result is an impression of a single object made up of many parts. It’s not only highly space efficient, it’s quite attractive.
This technique is obviously best to use if you don’t need to add a lot of contextual information to each image, though the hover event does provide a good opportunity for some additional text or graphics.
Vary the Vertical Height
When you vary the vertical height of the images in the gallery, the result is a much more organic looking page. Though the is still governed by uniform rules, the layout doesn’t feel as rigid as with a typical grid.
This is obviously the perfect solution for displaying images that just happen to have different heights, but should also be a consideration whenever your overall page theme is relaxed or free flowing.
Don’t Be Square
Squares are boring! If you want your gallery to break the mold, try experimenting with different shapes for your thumbnails. The typical second option is circles, as you’ll see below, but as the first example shows, it’s definitely effective to go even further and do something all your own.
CSS3 makes it easy to create lots of great visual effects. One recently popular image treatment has been to use CSS transforms to rotate the images in a gallery, an effect that’s often partnered with an animation on hover.
The result looks a lot like pictures hanging crookedly on a wall or polaroids spread out on a table. Here are a few different variations of the effect.
CSS box shadows are a fairly simple property to work with. Just set your position and feathering and you’re ready to go. Many developers have discovered recently though that by combining shadows with transforms and pseudo selectors, you can achieve a ton of different and impressive results.
The shadows that you apply to your gallery can change the overall feeling of your entire page. Check out the shadows below and how they give the illusion of actually reshaping the image.
Other Inspiring Galleries
Show Us Yours!
Now that you’ve seen our collection of some of the most interesting galleries around, it’s your turn to share. Leave a comment below with a link to any galleries that you’ve either built or simply found inspirational.