Image Gallery Grid Loading Effect on Click

Worried about licensing?

Do you have right license for your templates and fonts?

Head over to our partner Envato Elements and unlock unlimited downloads of over 50 million digital assets with full commercial licensing.

  • 50+ Million Assets with Unlimited Downloads
  • Templates, Addons, Fonts, Footage, Photos, Brushes, Presets & More
  • Full Commercial licensing for client work

Get ultimate peace of mind!

Get Started Now
Image: Image Gallery Grid Loading Effect on Click GIF

If your next web project has got a lot of images and you need to showcase them in an image gallery using grid layout then you will love this snippet by Codrops. In this tutorial, they showcase 6 different loading effects for the click action on the image gallery.

Here is a short description of the various effects

  1. Image Grid 1: When you click on an image it zooms out and loads the image in a lightbox by dimming out the rest of the web page. It also displays the image name below the image.
  2. Image Grid 2: On click the image zooms out to the left hand side and you see the title, description of the image on the right along with a few other attributes fields.
  3. Image Grid 3: This effect is similar to the grid 1 option but the image title is above the image.
  4. Image Grid 4: On click the image zooms out in a lightbox and you get a image carousel below the main image.
  5. Image Grid 5: This option is great when you want to load multiple image albums, each image thumbnail loads up the main image and a few images before and after the image in a fan like layout.
  6. Image Grid 6: Very similar to grid 1 but the image and the text below it has some space between them.

Check out the tutorial and the demo.

Posted by:Hima Vincent

Hima Vincent is the founder & editor in chief of CodeMyUI. She is a writer by day and a reader by night who helps web designers build awesome projects by sharing amazing code snippets for inspiration. Hobbies include designing, card games, photography and exploring the culinary arts.