Grid Layout with Scrollable Content View

A Masonry-powered grid layout with a motion hover effect on the grid items and a scrollable content view.

By Manoela Ilic in Playground on
Demo Code

Today we’d like to share a Masonry-powered grid layout with you that has a motion hover effect on the items and a content preview that is scrollable. Once a grid item is clicked, we animate the image to the center of the page and scale it up. The background of the item also scales up, filling the whole page and forming the new background of the content preview. The content preview is scrollable, with some more text showing beneath the image. The animations are powered by TweenMax.

Attention: Note that we use modern CSS properties that might not be supported in older browsers.

The initial view of the layout looks as follows:
GridLayout_01

When clicking on an item, we show the content:
GridLayout_02

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Check out our Collective and stay in the loop.

Here’s the whole animation:

GridLayoutScrollable

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

References and Credits

Manoela Ilic

Editor-in-Chief at Codrops. Designer, developer, and dreamer — sharing web inspiration with millions since 2009. Bringing together 20+ years of code, creativity, and community.

grid masonry page-transition

Interactive 3D with Three.js BatchedMesh and WebGPURenderer

Background Shift Animation with CSS Blend Modes

On-Scroll 3D Stack Motion Effect

The
New
Collective

🎨✨💻 Stay ahead of the curve with handpicked, high-quality frontend development and design news, picked freshly every single day. No fluff, no filler—just the most relevant insights, inspiring reads, and updates to keep you in the know.

Prefer a weekly digest in your inbox? No problem, we got you covered. Just subscribe here.