Unreveal Effects for Content Previews

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

By 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

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.

Building a WebGL Carousel with React Three Fiber and GSAP

Hover Preview Effect with Mini Map

Creating an ASCII Shader Using OGL

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!