Double Image Hover Effects with Clip-Path Animations

Some ideas for hover effects using clip-path animations where the same image gets revealed in a creative way.

Today I’d like to share a demo with you that explores how to utilize CSS clip-path to create interesting-looking hover effects that reveal the same image in a unique way. By applying a specific clip-path animation to the image and doing funky things like animating the CSS filter property, or transforming the underlying image, we can create so many different kind of effects.

With some of the effects, I tried to make it look like some cyber-punk like, futuristic interaction. So if you see some sort of staggering, it’s totally intended 😂 The ingredient for this secret sauce is using step() for the easing function.

Some of the effects use more than just two images for the effect.

Have a look at some of the examples:

An unreveal effect with a filter effect during the animation
Here we are inverting the image after a step-like animation
This one is a creepy glitch effect

Hope you enjoy these hover effects and 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.

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!