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.

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:

Mary Lou

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.


Stay up to date with the latest web design and development news and relevant updates from Codrops.

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

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

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

    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.

  4. 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!

  5. Hi Mary Lou!Is a great work.
    But, can you tell me how to insert slideshow into this lightbox?
    greetings Alex

  6. Hi,
    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 ?
    Best regards,

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