Grid Layout with Motion Hover Effect and Content Preview
Publikováno: 23.5.2018
A retro-style grid layout with a playful motion hover effect on the grid items. When clicking on a grid item, a content preview opens.
Grid Layout with Motion Hover Effect and Content Preview was written by Mary Lou and published on Codrops.
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.
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.