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.

By in Playground on
Demo Code

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

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

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

References and Credits

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.

Creating an Interactive Mouse Effect with Instancing in Three.js

Inline Layout Switch Ideas

Magnetic 3D Grid Interaction with Content Preview

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

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.

  3. 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).

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