From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.
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 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!