Image Reveal Hover Effects

A set of link hover effects that reveal a thumbnail in different creative ways.

By in Playground on
Demo Code

Today we’d like to share a set of link hover effects with you. The main idea is to reveal a thumbnail image with a special effect when hovering a link. The inspiration for this idea comes from the effect seen on Fuge’s website where you can see a thumbnail showing when hovering the underlined links. More effect inspiration comes from Louis Ansa’s portfolio and Zhenya Rynzhuk’s Dribbble shot “Blown Art Works and News Platform”.

The animations are made using TweenMax.

Attention: Note that we use modern CSS properties that might not be supported in older browsers.

Have a look at some of the effects:

Hoverreveal01

Hoverreveal02

Hoverreveal03

We hope you like this little effects and find them inspirational!

References and Credits

Tagged with:

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.

Magnetic 3D Grid Interaction with Content Preview

Superhero Animation Effect with SVG Filters

Some Ideas for Fullscreen Image Slideshow Animations

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!