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.

By Manoela Ilic in Playground on
Demo Code





















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.

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

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

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Menu and Thumbnail Stack Animation

Alternate Column Scroll Animation

Image Stack Entrance Animations

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 74

Comments are closed.

  3. For those who want to add the close funcationality when ‘esc’ has been pressed, find the the following code:
    “`
    this.closeCtrl.addEventListener(‘click’, function() {
    self._closeItem();
    });
    “`
    Add the following:
    “`
    $( document ).on( ‘keydown’, function ( e ) {
    if ( e.keyCode === 27 ) {
    self._closeItem();
    }
    });
    “`

  11. Hey guys,

    There’s an issue with gallery 2 that makes it not work with ipad / iphone – clicking on the image takes you to the image file itself since it seems like some safaris actually follow the link.

    The way I’ve dealt with it is by changing the <a> tag to a on the large image container that has the href=”large image” attribute, and then changing main.js line 183 from

    this._setOriginal(item.querySelector(‘a’).getAttribute(‘href’));

    to

    this._setOriginal(item.querySelector(‘.img-wrap’).getAttribute(‘href’));

    obv from there you can apply css on the .img-wrap to do cursor:pointer etc. It seems to work completely fine even with a div that has a href attribute.

  13. Manoela: I know this is an old demo, but it does not display on Win 10 with Chrome or Firefox. The closing ‘x’ when the image is expanded does not show up (demo 1) I just checked – ALL DEMOS behave the same with same large image. On Android cell (chrome) and iphone safari it displays well. It also works on Edge.

    • Well it might be a false alarm. It just does not work on my new win 10 laptop. I had a friend who said it ran on his win 10 PC with chrome.

    • It seems that touch screen and mouse can’t coexist. After I disable touch screen mousey works.

  14. Love this one, I modified to only use demo 1 but my images will not open as it should. Also one image is larger than the others and I can’t seem to locate the code to insure it opens like the rest. Any suggestions?

    Thank you

    • Update, it now works but still the issue of one image is larger. My problem was I placed code before the script at the bottom which caused that code to not work.