Discover the best hover websites created by professional designers. Get inspired and start planning your perfect hover web design today!

Osmo

Until launch, we’re offering a free cloneable every single week, so you can get a feel for what’s coming.

Join the waitlist → https://osmo.supply/

Apple Dock Navigation Bar

Vilni's Workspace

AI-driven outreach for email, LinkedIn, and cold calling —Oneshot.ai handles the details, your SDRs drive the results.

OneShot.ai

Fra Mauro

Website design and development for We Are The Select, a boutique paid media consultancy operating out of Newport Beach, CA.

This site features a custom nested menu, GSAP text scramble effects, and a hover pixelation animation on the main page.

The goal was to create something that was anti-agency. There are too many marketing agencies out there with loud branding - the world certainly didn’t need another. Intrigue and saying less than necessary can go a long way.

We Are The Select

Landing page and password-protected investor portal for The Dropout Companies, a portfolio company focused on building and growing gen z geared consumer product and packaged goods brands.

The 3D interaction found on the home page is a hover integration that was built in Spline and animated in Webflow.

The Dropout Companies (Hold Co)

Rasmus Gullbo

Orange Day calls upon activists, governments, and UN partners to mobilize people and highlight issues relevant to preventing and ending violence against women and girls. Together with Nord DDB we designed and built an interactive landing page where people can create and share their own posters.

UN Women - Orange Day

Robin Granqvist

Just some fun animated card components. Feel free to clone 🙌

If you like this one, check out my templates on the Webflow marketplace - https://robn.link/templates

My portfolio - https://robn.link/portfolio

Swoopy Hover Cards

Ilja van Eck

[ Tutorial ]
https://www.youtube.com/watch?v=aumA-8KQH-I

Staggered letters and word animations are quite popular. I always created these with a duplicate of the original text, but Jan-Willem Wessels (thanks buddy!) shared a great technique with me that uses a text-shadow. It's not only easier, but also better for accessibility. 

Check out Jan-Willem his work on clevermellow.co

Letter stagger animation without duplicate text blocks [ Cloneable ]

También

5 button hover animation to level-up your Webflow Skills

TMBN Buttons

Web Bae

Let's rebuild the trailing grid mouse follow effect as seen on https://thisisdash.com/ with p5.js. Learning how to make this delightful animation can teach you a lot about Javascript and inspire other effects to help you build eye catching websites!

Tutorial: https://youtu.be/bI6v2DgpZwM

Award Winning Grid Trail Mouse Follow Effect

Timothy Ricks

GSAP Hover Span

Watch lesson at https://www.timothyricks.com/resource/css-hover

CSS Hover

Manish Pandey

Create a more dynamic and interactive experience for your users by using a simple cursor animation made using Cuberto Mouse Follower and GSAP. 

Free to Clone and experiments. Follow for more and visit my profile for more such interactions and cloneables. 

Thanks! 

Smooth effects for the mouse cursor with Text and Video on Hover using JavaScript

Neue World

Image on Hover for your next WebFlow site. We have created 5 variations on how you can create these beautiful effects. For more tools visit https://www.neue.world/webflow-tools

Image on Hover by Neue World

Master Flowmaker

Custom Cursor on Hover

037 - 100 days of @webflow interactions

Clone it
https://webflow.com/made-in-webflow/website/037-100dwfix

#37 Custom Cursor on Hover

Rachel Kreutzkamp

Portfolio of Webflow Developer & Motion Designer ✨ Rachel Kreutzkamp. Hopefully an evolving work in progress, this guy is the outcome of a clean sidebar layout with minimal extras keeping the focus on the work 💻

imrachelk

Marcin Rzymek

Looking for animated banner for your next project?
Simple, yet effective, eye-catching element with your message.

Thinking accessibility? Hover over the element to pause the animation.

- Feel free to clone the entire project, copy/paste marquee component or just one of the marquee elements.
- Adjust animation duration in embed element (CSS).

__
Why to bother?
Most of use use interaction panel to create such effect. But why to generate JS if we might achieve same effect much easier with just a few lines of CSS, having better control over the animation and being able to stop it on hover, click or other trigger (using CSS or jQuery). Just sayin ;) 

Have fun!

Infinite marquee CSS based (Cloneable)

Halo Lab

The exhibitions may be closed in the galleries offline this year. But they are always available online. The website invites you to go on virtual tours around galleries and learn about art. Explore the painting in detail, zoom, save your favorites and read historical facts about the author.

Nature Morte

Mason Pajunas

Portfolio website design and development for Henry Northington, a writer, creator, and brand specialist.

The site aims to showcase Henry’s personality as well as his work through an interactive pixel-based, retro word-processor style journey.

Super fun to design and build from beginning to end. Big thanks to Henry for the opportunity to build something unique and packed full of enjoyable moments.

View the live site here ↓
https://www.henrynorthington.com/

Henry Northington Portfolio

1070795817

1316201488

1316201489

1462086697

1567550242

1592612642

1726628865

173927913

1771795565

1863160016

1905118106

2144870841

2213518682

2216482092

2339906037

2351366352

2355632600

https://s3.amazonaws.com/webflow-dev-assets/66fd83b6cc0c8c6ed0e398e6%2Fcontent.json

2401116685

2486364096

gpt-4o

gpt-4o-mini

2546957535

2631983062

2789269995

2857348505

2903381045

User Accounts will no longer be available on January 29, 2026.

Visit Webflow’s Help Center for migration guidance and more info.

3023147062

3106924665

3112069432

3120801339

3258716925

3289310561

3313039722

3315729993

3410497685

3557227276

3590523401

3591394191

3737116140

3801251705

3913199261

3934148661

4092855684

4103643638

4206156914

451433404

504462606

622649767

622649768

657188092

665836192

737109165

772001133

846847440

882147072

938734410

1004117952

1049811722

105340574

1120744071

1131151533

1157563538

1171384976

1197475705

1229056119

1234765101

1236803103

1250328847

1292405251

130043074

1306352991

1312703771

1322655470

1336067073

1350250754

1380813821

1380896143

1406455659

1418395020

1433303746

143629253

1437392009

1455163268

1455742168

1457420719

1458975701

146940023

1475952185

1483622682

1490715908

1499868407

1501922903

1509255256

1530015515

1545754914

1557989767

1568482678

1571190444

1575119218

1662541974

1665126082

1675015083

1680201874

1680586027

1701648875

173185438

1752293186

1753134293

1803820771

1826978162

183596474

1856326096

1857805694

1861549476

187681422

1928608458

1931880952

1944913766

1951876014

1968719184

2031799369

2034576520

2084850560

2085494476

2091902242

21336891

214950889

2161096664

216777687

2182233325

2184630439

2187198051

2193997669

2198334698

2224902271

224017973

2274255187

2276264697

23146391

2332153945

2340184165

2354820654

2361218180

2378130748

2403993584

2458909760

Best Hover Websites | Free Examples & Designs

Discover Hover websites
built by the Webflow community

Browse, clone, and customize thousands of websites #MadeinWebflow. Looking for templates?

Discover Hover websites built by the Webflow community

Browse, clone, and customize thousands of websites #MadeinWebflow. Looking for templates?

Discover Hover websites
built by the Webflow community