CSS Grid Layout Slideshow
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
- Images used in the demos are from Unsplash.com
- ImagesLoaded by Dave DeSandro
CSS Grid Layout Slideshow was written by Mary Lou and published on Codrops.