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.