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






















View demo Download source

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

View demo Download source

Previous:
Next:

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.

View all contributions by

Website: http://www.codrops.com

Related Articles

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

Which newsletter would you like to receive?

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. 1

    Amazing article and demo, just as expected from you! 🙂
    I am blown away by the smoothness of the animations!

  2. 2

    I wish someone would port at least a few of these effects to PhotoSwipe, so we can use it in serious projects.

    I’ll start by myself, will post Github link when done.

  3. 3

    While cool effects, the quality of the demo itself seems lower than usual Codrops. Like, hitting escape should close the overlay effects etc.

    That said, demo 2 is something I could use 🙂

  4. 5

    On Windows Phone, in Demo 4 the slider doesnt work as well as thumbnail click.

    • 6

      It’s made to be like that. The slider and thumbnails are not really interactive.

  5. 7

    The second one is simply fantastic, I’ve not looked at the code yet but i love how you have the extra bits of information around the camera settings..

    Good job

  6. 8

    Thanks for putting that together and overall a wonderful exploration. Demo 5 has me thinking why you wouldn’t simply open the entire album when clicking on a thumb. Alas, perhaps that’s too much into usability thinking…

  7. 13

    Hello Mary Lou,

    I see you’re a vegan, no wonder you’re so intelligent. 🙂

    Do you have a vegan blog?

  8. 14

    It’s very good stuff, one thing for me, all full screen elements must have an ESC event for close it. I’m lazy and it’s always annoying without shortcut 🙂

  9. 15

    Didn’t work in Chrome, and there was this deprecation notice in the dev toools console: ‘SVG’s SMIL animations (, , etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.’

    Lovely idea, and works fine in other browsers. As the SVG code is out of date and no longer supported it might be worth finding out another way of doing it.

  10. 21

    Interesting demo and appreciated for the great design ideas.

    Unfortunately, my 1st look at the demo (in Chrome) failed completely.

    Works fine in FireFox. But in Chrome each image in every demo just opened the image in a new Tab.

    Here are 2 screencap links to show you how your demo acts in Chrome:
    i.e. Exclusion Warning: Deprecated Animations Ignored:

    1. About to Click Gallery Item: http://thecloudpool.net/_Assets/Codrops_Image-Grids_Chrome-01.jpg
    2. After Click on Gallery Item: http://thecloudpool.net/_Assets/Codrops_Image-Grids_Chrome-01.jpg

    Perhaps you can post an update or a reply, RE:
    – Cross-Browser functionality of these creative gallery effects
    – Are core aspects of your demo already being phased out by browsers enforcing “Ignore Deprecated…”

    Thank You!

    XIMBALO

    • 22

      Sorry — 2nd link should have been:

      http://thecloudpool.net/_Assets/Codrops_Image-Grids_Chrome-02.jpg

      FYI – reason for this reply is absolutely not trolling around looking for code demos to critique!
      Rather, as a website designer/developer — I have a number of Graphic Artist, Creative Artist, and Photographer portfolio website clients who are asking me for new and interesting ways to handle to Portfolio Gallery Image “Mouse Click” events.

      The uber-standard “Modal LightBox Slideshow” annoys them, being visual artists, they find it to be “Common and Pasé”.

      Thus, I am investigation creative gallery presentation articles like yours.
      I would like to implement some of your ideas.

      But clearly —
      It has to work everywhere — and for at least 2 years going forward.

      Thank You

      XIMBALO

Comments are closed.