Grid Layout with Motion Hover Effect and Content Preview
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 demo is kindly sponsored by monday.com: Get your team on the same playbook!. If you would like to sponsor one of our demos, find out more here.
Attention: We’ve made this layout with modern browsers in mind.
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.
LEAVE A REPLY
You must be logged in to post a comment.