Image Tiles Menu Animation

An animation featuring image tiles that transform into a full image when a menu item is clicked.

Today I’d like to share a little menu effect with you. Basically it’s an animation with image tiles that transform into a full image when a menu item is clicked.

The demo starts with a menu that overlays an image split into four tiles that are scattered around the menu. On hover, the image pieces change, depending on the menu item. When a user clicks on a menu item, the respective image tiles animate to form a full image and some more content is shown while the menu disappears.

Our initial view is the following:

When we choose a menu item and click on it, the image pieces animate to one whole image and the respective content appears:

Here we then have a slideshow mockup as an idea what we could show in this content screen.

This is how it looks in action:

Hope you enjoy this little animation and find it inspiring!

The images for this demo were generated with Midjourney.

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!