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