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.
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!
References and Credits
- TweenMax by Greensock
- Images from Unsplash.com
- imagesLoaded by Dave DeSandro
- Cross icon designed by Freepik
Grid Layout with Motion Hover Effect and Content Preview was written by Mary Lou and published on Codrops.