CSS Grid Layout Slideshow

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

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:




We hope you enjoy this experiment and find it useful!

References and Credits


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