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

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

Here’s the whole animation:

GridLayoutScrollable

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.