Image Gallery Grid Loading Effect on Click

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.