CSS Grid Layout Slideshow

A slideshow where each slide has an individual CSS grid layout and a reveal effect when navigating.
GridLayoutSlideshow_Featured

Today we’d like to share a little slideshow with you that is powered by CSS grids. The idea is to have several images shown in an artsy way and apply a different layout for each slide. We also play with a reveal effect where we show and hide the items when navigating between the slides.

Attention: We are using a couple of new CSS properties like CSS variables and the new CSS grid layout which won’t work in older browsers.

For the last demo, we also use a mix-blend-mode on the image grid items on hover.

For the different grid layouts we set an individual grid-area to each item. This allows us to specify exactly where we want each item to start and end. The grid-area property is a shorthand for the four edges (row start / column-start / row-end / column-end):

[row-start] (first)[row-end] (third)[column-end] (fourth)[column-start] (second).item

Read more about CSS Grid in our CSS reference entry written by Hui Jing Chen: A Complete Guide to CSS Grid

This demo is kindly sponsored by dapulse, the visual project management tool.

Have a look at the different layouts and styles of the slideshow:

GridLayoutSlideshow01

GridLayoutSlideshow02

GridLayoutSlideshow03

We hope you enjoy this experiment and find it useful!

References and Credits

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

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 24

    • 2

      Seriously she should write an article about how she does stuff and where does she learns it from

  1. 5

    Oh. My. God! Thank you so much for this article, I was looking for something like this for ages, but didn’t know how to even call it to find any info. Gotta go try implement this design immediately. This is simply brilliant.

  2. 8

    Hi Manoela,
    This is a really nice and creative way of presenting a gallery, but, to be honest, I miss one (IMHO) decisive step for it to be perfect :) – i.e., after flicking through the gallery, being able to select a particular image and enlarging it by clicking on it. If anybody knows a rather simple solution to that effect, I would be grateful for a tip!
    BTW, Manoela, thank you so much for your always enjoyable and inspiring blog posts!

    • 9

      This is solvable with a bit of JS knowledge and the know-how to use an external plugin. Lightbox is the term you’ve been looking for! :-)

  3. 13

    Great article, Mary Lou! There are really some trick elements happening here. In the right application, these can be a real show stopper. It is a very particular client that it will work for, but when it does, it is matchless in intrigue. We have seen these sites to be pretty inconsistent in their mobile functionality, but this will undoubtedly work itself out in time. Thank you for putting this together!

  4. 14

    This is nice, design is good. i have a question, IS THIS AVAILABLE FOR MOBILE DEVICES or MOBILE VERSION

    Works Perfectly Fine
    Smooth Animation and effects

  5. 15

    I have got a solution from this article. I am trying to create a grid layout slideshow. I have seen demo. its amazing.

  6. 17

    I need to use it within a section of my website. But it does not work for me if not on full page. What could I do to make it work as I need it?

  7. 18

    Hi Mary Lou, I was looking for the same code and I am really happy to get your website on Google. This is really an easy code. Thanks!

  8. 21

    Good work! I have a one question… Why grid on tablet is resistant to any changes? The mobile version on the phone works fine.

  9. 24

    Gosh.. learn from it – instead of begging her to fix/adjust for your needs..
    WTF is wrong with you guys? Copy & Pasting is not development..

    Oh and btw.. codrops was always cutting edge tech and rather demonstrates proof-of-concept stuff..

Follow this discussion

Leave a Comment