From our monthly sponsor: Ship customer-facing metrics fast with Keen.io. Collect, store, query, & display stunning analytics.
Today we’d like to share a little grid layout with you. We use CSS Grid and a playful hover effect on the grid items which are composed of different wildly placed elements. When an item is clicked, we slide in a content preview overlay and animate the grid items out and the preview items in. For the animations we use TweenMax by Greensock.
The inspiration for this demo comes from Brian Roettinger’s design WORDS IMAGE SOUND>.
Here’s how the grid looks like:
The content preview overlay looks like this:
We hope you enjoy this little layout and find it useful!