Effect Ideas for Image Grids

Some inspiration for effects on image grids. The ideas include animations on the opening grid item, the disappearance of the grid and the resulting view.
ImageGridEffects_Main

From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.






















Today we’d like to share some inspiration for image grid effects. The idea is to animate the grid item when opening it, the other grid items’ disappearance and the new content. The content shown can be anything from just the larger version of the image and a title (think image gallery) or something like an album view. The common effect to all is the animation of the clicked grid image: we move it to the desired spot, scale it up and then replace it with a larger version. This creates a direct flow between the grid and the other (full) view.

For the demos we use a grid that is powered by Masonry, the popular cascading grid layout library by Dave DeSandro.

The images in the demos are from Unsplash.com, the place for fantastic free and high-quality photography.

The quotes used in the second demo are taken from The Top 100 Vegan and Vegetarian Quotes by Pledge Vegan.

Attention: The demos serve as inspiration for effects and are not full solutions. They make use of modern CSS properties that might not work in older browsers.

Here is an overview of all demos:

  • Demo 1: The current image becomes fullscreen and the page gets covered with a circle that comes from opposing sides.
  • Demo 2: The current image takes up half of the screen on the left while the grid items scale down and disappear. A description will show up in the full view.
  • Demo 3: The current image flies to the lower part of the screen while the title appears on top of it. The grid items disappear by “falling” down and fading out with different delays.
  • Demo 4: This demo shows how a gallery view could be changed by making a thumbnail navigation appear in the full view. The grid items all scale down to the lower center of the page.
  • Demo 5: Here we have an example of a album grid where the full view is a detailed view of a particular photo album with a description.
  • Demo 6: The last demo shows how the grid items can be animated laterally in an interesting way and create a bit of motion.

We hope you enjoy this little experiment and find it inspiring!

Featured image credits: Minimal Browser PSD Template by Do/Make

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 74

Comments are closed.
  1. Totally love this image gallery. I am using this on a .net site. Any ideas on how to prevent the parent page from reloading when the popup is closed?

  2. Hi can any one Help how we can reinitialize the GridFx for auto arranging the new appended images an open new images in a window same like old gallery images on same page for demo 1.

  3. Really love the second one inside the demo, nicely done. Only thing it’s missing is a better ux.

  4. This is overall a great experience. Looking forward to such interesting ideas and tips.

  5. please help ,i have downloaded this and tried to open in my mobile phone..but it is showing plain text, no images, i have cheked all paths and code. this code is not running in my phone

  6. It’s just nostalgic… Remember my studies of HTML when I started. I’ve spent hours making grid such as these. Anyway, it’s a beautiful one that you made, congrats! 🙂

  7. Zdravo crnacuro, divna si. Sve radiš super, btw, moje prezime je Ili? too.

    Don’t you find the way the preview is linked is a bit old fashioned?

    <a href="img/original/8.jpg" class="img-wrap">

    Maybe another data attribute in

    <div class="grid__item" data-size="1280x850">

    ex.

    <div class="grid__item" data-size="1280x850" data-original="img/original/8.jpg">

    and a bit recording in js

    // set the src of the original image element (large image)
    //this._setOriginal(item.querySelector('a').getAttribute('href'));

    this._setOriginal(item.getAttribute('data-original'));

    Now, it is possible to remove a from html block, add class img-wrap to img


    <div class="grid__item" data-size="1280x850" <data-original="img/original/8.jpg">
    <img class="img-wrap" src="img/thumbs/8.jpg" alt="img08" />
    <div class="description description--grid">Assemblage</div>
    </div>

    Sve najjjjj!

  8. Excuse me, Can I put the video from vimeo instead of image on preview page and how?
    Thank you 🙂

  9. Really great work!
    I like especially the Demo 2. But I do have an question. How do I put the picture and text under each other when the image grid is viewed on a smartphone (essentially when browser height > browser width)?
    Currently the picture get’s just really small and only the main Caption is displayed.

  10. There’s is a problem with the function, for example for the same width and height picture will clone each other after select a same width as the previous one. I don’t have idea, anybody know how to fix it ?