Norway


A retro-style with a playful on the items. When clicking on a item, a opens.

GridLayoutMotion_featured  - GridLayoutMotion featured - 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 inspiration for this demo comes from Brian Roettinger’s design WORDS IMAGE SOUND>.

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:

GridLayoutMotion_grid  - GridLayoutMotion grid - Grid Layout with Motion Hover Effect and Content Preview

The content preview overlay looks like this:

GridLayoutMotion_preview  - GridLayoutMotion preview - Grid Layout with Motion Hover Effect and Content Preview

- advertisement - Grid Layout with Motion Hover Effect and Content Preview

We hope you enjoy this little layout and find it useful!

References and Credits

Previous:



Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here