Grid Layout with Motion Hover Effect and Content Preview

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.
GridLayoutMotion_featured

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

The content preview overlay looks like this:

GridLayoutMotion_preview

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

References and Credits

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

Receive our bi-weekly Collective or official newsletter right in your inbox.

Which newsletter would you like to receive?

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 8

Comments are closed.
    • 2

      Status report: Demo does not play well on Chrome and win 7 machine. Text does not show.

      And Unfortunately, I could not make it work with weebly. It will not open the overlay. But I think I can salvage it by giving direct links to images to other pages.

    • 3

      Mary Lou, you’re one of the most delightful things that’s ever happened to the Internet. I am consistently in awe.

  1. 5

    Appreciate the site and the consistently amazing demos. I wish though that these demos came with a tutorial or at least liberally commented code (for us JS noobs).

  2. 8

    same thing here, class based js is not easy to read without comments, and should not be used unless hundred thousand elements…

Comments are closed.