From our sponsor: Create stunning brand assets with the help of our AI-driven Creative Assistant. Get started today.
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.
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
Amazing article and demo, just as expected from you! 🙂
I am blown away by the smoothness of the animations!
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.
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 🙂
Second demo is what I wanted for a while. Pretty nice effect. Thanks.
On Windows Phone, in Demo 4 the slider doesnt work as well as thumbnail click.
It’s made to be like that. The slider and thumbnails are not really interactive.
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..
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…
2, 4 & 5 are good.
Like the shortness of your post as well.
Great Thanks Mary Lou
Hello Mary Lou,
I see you’re a vegan, no wonder you’re so intelligent. 🙂
Do you have a vegan blog?
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 🙂
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.
Very smooth and sci-fi
fantastic, very clean code for girding images. tnx
Wow great example!
Vegan quotes! ?
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…”
Sorry — 2nd link should have been:
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.
But is there a simple mesh without increasing?
I really love the smooth animations and the thumbnail views. I’ve created a lightbox gallery on my own:
I will add some code now to let this gallery become some true plugin!
Is it possible to specifically flip content to wordpress ?
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?
Hi How can we reinitialize function for new content images that we append? any idea ?
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.
Really love the second one inside the demo, nicely done. Only thing it’s missing is a better ux.
This is overall a great experience. Looking forward to such interesting ideas and tips.
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
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! 🙂
Demo2 goes to deploy grid-a-licious? If yes. Is there anybody who would do that?
Could anyone help me please?
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">
<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>
Excuse me, Can I put the video from vimeo instead of image on preview page and how?
Thank you 🙂
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.
Great gallery! Is it possible to include it into WordPress? How can I do?
Hey there, I’ve had a little Time on the weekend and here is how far I’m. http://andreknieriem.de/tympanus/demo.html If you want, I will try to bring it to an end.
OMG! Absolutely loved it…. cant wait to try it…
Sensational! I applied this on my website about el “camino de santiago” loading photos dynamically from Instagram: http://santiagocommunity.eu/
Thanks a lot. 🙂
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 ?
I have got the same problem. Do you have any solution by now? 🙂
Muy bueno este tutorial, excelente
Hi, is there any way to get the grid to get width:100vw?
I’m using the second demo.
Is it possible to have more than one full image?
Is it possible to use this with AngularJS?
UM erro acontece no exemplo 2.
Quando eu tenho imagens do mesmo tamanho a JS sobrepõe a imagem clicada antes, exemplo: Clique sobre a imagem Silent Killer e Friendly Terms, depois inverta clique primeiro na Friendly Terms e depois Silent Killer. Isso acontece no Google Chrome.
An error occurs in example 2 .
When I have pictures of the same size JS superimposes the image clicked before, example : Click on the image Silent Killer and Friendly Terms , then invert first click on Friendly Terms and then Silent Killer . This happens in Google Chrome.
Existe un problema al colocar dos imágenes seguidas del mismo tamaño. Por ejemplo, en el “Demo 4”:
Si tenemos dos “data-size” seguidos y con las mismas dimensiones:
<div class="grid__item" data-size="1280x1280"> <a href="img/original/10.jpg" class="img-wrap"><img src="img/thumbs/10.jpg" alt="img10" /> <div class="description description--grid">Desideratum</div> </a> </div> <div class="grid__item" data-size="1280x1280"> <a href="img/original/7.jpg" class="img-wrap"><img src="img/thumbs/7.jpg" alt="img07" /> <div class="description description--grid">Scintilla</div> </a> </div>
Pulsamos sobre la primera, esta se abre de forma normal y se cierra de forma normal pero al pulsar sobre la siguiente al abrir aparece la imagen anterior.
Hi Marulo, thanks a lot for pointing that out. I’ve tested that case and I can confirm the bug in Chrome. This seems to be a problem of rendering in Chrome only. If you inspect the image element you can see that the src attribute is actually correct. Let’s hope this gets fixed soon 🙂 Thanks again and cheers.
Hey Mary Lou and other guys who can hopefully help me,
i am using a pretty similar Gallery on my Website which is already a bit older but works fine.
It is called Gamma Gallery – “A Responsive Image Gallery Experiment”.
My question now is, if there is any possibility being able to remove the loading image and let the images load one after another.
Because I think that it is quite bothering having to look 10 or more seconds at this loading image.
Hopefully you can help me guys. Thank you very much.
Warm greetings Simon!
Hi Mary Lou!Is a great work.
But, can you tell me how to insert slideshow into this lightbox?
Very nice job !
I used this in a Joomla! website to display articles.
I would have one question, I would like this to be responsive, and fit the full width of the screen. I tried to set the .grid__item to % instead of pixels, it seems to work fine on page load, but the layout gets broken and weird when resizing the window.
Any idea on how to fix this please ?
HE doesn’t work anymore !!