Grid Item Reveal Animation on Hover

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

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

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.

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.