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 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:


[adrotate group=”2″]

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

References and Credits

Tagged with:

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…