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.

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

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 8

Comments are closed.
    • 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.

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

  1. 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. same thing here, class based js is not easy to read without comments, and should not be used unless hundred thousand elements…