Grid Zoom Layout

A simple image grid layout where a small grid image zooms to become larger while a content view opens.

Today I’d like to share a simple grid concept with you. The idea is to “zoom” or scale up a small grid image and show some more content (i.e. a project slideshow that is not implemented) and a small map that shows a miniature version of the whole image grid so that it becomes easy to navigate.

Combined with some text animations that we’ve previously explored in Layout with Reveal Animations and Content Preview, the whole design comes to life. We are using the same code as in the other demo.

The initially view looks as follows:

When clicking on a grid image, we animate it to the right side of the screen and scale it up.

And this is how it all comes together:

I hope you enjoy this little experiment and find it useful!

Thank you for checking by 🙂

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 in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!