Unreveal Effects for Content Previews

Some explorations of page transitions using covering elements and CSS clip-paths.

By Manoela Ilic in Playground on
Demo Code

Some time ago, we explored a cover page transition that would hide some initial content and show another level of content, i.e. “unreveal” it. Today I’d love to share some more ideas for showing another page or preview, including one that uses CSS clip-path to achieve the effect.

This is our initial view:

When clicking on an item, we hide the current content by covering it with an expanding circle. Then uncover the preview by expanding a clip-path. This is the next view:

And this is how it all looks in action:

There are three different effects. Hope you enjoy them and find them useful!

Thanks for checking by!

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.

page-transition

Progressive Blur Effect using WebGL with OGL and GLSL Shaders

How to Create a WebGL Rotating Image Gallery using OGL and GLSL Shaders

Replicating CSS Object-Fit in WebGL: Optimized Techniques for Image Scaling and Positioning

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.