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.
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):
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.
LEAVE A REPLY
You must be logged in to post a comment.