Grid Item Reveal Animation on Hover

A recreation of the grid item reveal animation on hover as seen on the website of Metalab.

By in Playground on
Demo Code

Recently, the new design of the Metalab website went live. It is full of interesting animations and unique details, go have a look!

I love the animation of the project previews on hover and so I took a stab at recreating this lovely effect using more images.

Using hover animations is always a challenge and you can basically ditch them for mobile, but they are oh so pretty! Talking about mobile, I didn’t really do a fallback for this but I believe the best approach is what they do at Metalab, which is to simple got straight to the project.

Hope you like this little remix and find it useful!

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.

Distributed Letters Animation Layout

Consecutive Scroll Animations with One Element

Hover Animations for Terminal-like Typography

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!