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

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

Joseph Amato

Apple changed its homepage for International Women's Day. To make it special, I recreated it and replaced some of the images with the women in my life. You can compare it to the original here:

https://www.apple.com/go/iwd2020/

It's not a perfect replication, for instance, Webflow's mouse move interaction doesn't translate to mobile. I also cannot natively center the canvas, or delay mouse movement on load. 

Looks best on macOS. Cheers!

Apple International Women's Day 2020

Jakob Wrs

OGL (lite version of webGL)

https://github.com/oframe/ogl

ogl mousemove effect

WebDev For You

Welcome to Daily Interaction #133.

This demo showcases a parallax card animation on mouse move.

With this effect a card rotates on mouse move, and the image inside the card rotates and moves as well to create the effect of the image moving inside of the card. A caption also appears when hovering over the card. The card is in a 3d-wrapper with a child perspective applied to it to give the card a 3d effect as it moves.

Inspired by: https://codepen.io/andymerskin/pen/XNMWvQ

To view more daily interactions and premium content visit:
https://www.webdevforyou.com/

WebDev For You - Daily Interaction #133

Meraki Ventures

GET IT OFFFFF!!! 😄

You can customize your worm through the page's custom code. This was adapted from http://processing.org/learning/topics/follow3.html

Snippet → Wormy Cursor

Jonas Arleth

As soon as the cursor moves over a row in the table, the background appears, which fills the table row from the center. At the same time an image is revealed for each line, which scrolls at a fixed position with the page and could provide a preview of the content. You can also insert a background video here. Discovered on this website: https://neodlx.io

I added an additional line of custom code so that the effect still takes place even if you hover the mouse over the image and there is a table row below it. The image is ignored by the mouse (pointer-events:none).

Tutorial: https://youtu.be/pYPV0g54CU8

Table hover effect with image reveal

Loïc Bauméa

A responsive slider with a diagonal transition made for a client that didn't need it anymore. I thought that it was quite a shame to delete it so I kept it to share it with you because I like it! I just changed the design a little bit using free images from https://www.freepik.com/.

Custom code to change slides by scrolling.

Cloneable :)

Diagonal Transition Slider

I love the AppleTV remote and how it interacts with apps. I'm gradually developing all the primary tabs from the ground up natively in Webflow.

Element → Apple TV Tab

Cristi Goia

Hey you!

I'm testing different animations here in webflow and made this fun 3D mouse hover interaction that I think is really interesting to explore.

Cheers!

3D Hover Animation

1. Create a SECTION called foreground, change display to FLEX, center align it, and set its position to ABSOLUTE with a height of 100VH. Give it a COVER → FIXED background. Upload a blurred version of your photo.

2. Drop a DIV called MASK into the SECTION and customize it however you like. Set its position to ABSOLUTE with a Z INDEX of 1. For the zoom effect, simply add a CLICK interaction on the MASK.

3. Drop another DIV within MASK called PHOTO, set its width 100VW and height 100VH. Change its position to ABSOLUTE, give it a COVER → FIXED background, and upload the original image.

4. Add a PAGE TRIGGER interaction, select MOUSE MOVE IN VIEWPORT, and create an animation. Add MOVE interactions in the MOUSE X and Y panels.

MASK - Set X’s position to -50VW at 0% and 50VW at 100%. Set Y’s position to -50VH at 0% and 50VH at 100%.

PHOTO - Set X’s position to 50VW at 0% and -50VW at 100%. Set Y’s position to 50VH at 0% and -50VH at 100%.

That's all folks :)

Component → Native Photomasking

Welcome to Daily Interaction #134.

This demo showcases a parallax card animation on mouse move.

With this effect a gradient overlay moves with the mouse on hover, and a border moves in the opposite direction. The text also moves and rotates left and right with the mouse.

The effect was achieved by placing the gradient overlay and border within the card wrapper. The text was placed in the bottom right of the border div using flexbox. Then in interactions I added a 'mouse move over element' interaction and had the elements move and rotate on the x and y axis when the user moves their mouse over the card wrapper.

Inspired by: https://tympanus.net/Development/TiltHoverEffects/

Images from: Unsplash.com

To view more daily interactions and premium content visit:
https://www.webdevforyou.com/

WebDev For You - Daily Interaction #134

Timothy Ricks

Scrub GSAP Timeline on Mouse Move

Patrick Urwyler

With the basics from PixelGeek I realized this splitter hero and added black/white fading on mouse over, link-blocks and arrows – ready to clone and use for your next split screen hero.

Clone: Splitten hero with mouse over interaction

James Clarke

A portfolio website for Multi-Discplinary Designer James Clarke, showcasing both his work and playful character.

James Clarke Portfolio

También

The image will change depending on the cursor placement

Tutorial : https://www.youtube.com/watch?v=2kIX6h2mIkM&t=2s&ab_channel=Tambi%C3%A9n

Webflow Tips N°15 : Mouse Hover Animation

Some Service Cards with a Rotation Hover interaction including a highlight effect. All based on the Webflow Tutorial example. Clone and play around with colors, also the rotation could be a bit improved...

Clone: Service cards x rotation on hover

Dhruv Sachdev

Re-build of the beautiful Bike Riders Point of View Effect from www.takearidewith.me

I subtly improved the blinking animation by adding blur and darkness. All interactions are re-built in Webflow.

Point of View Effect

Webflow Tips N°6 : Mouseover Menu

1070795817

1316201488

1316201489

1592612642

1726628865

173927913

1863160016

1905118106

2144870841

2216482092

2339906037

2351366352

2355632600

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

2401116685

2486364096

2546957535

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

3258716925

3289310561

3313039722

3315729993

3410497685

3557227276

3590523401

3591394191

3913199261

3934148661

4092855684

4103643638

4206156914

451433404

504462606

622649767

622649768

657188092

665836192

737109165

772001133

882147072

938734410

1004117952

1049811722

105340574

111780934

1120744071

1131151533

1157563538

1171384976

1197475705

1197746894

1229056119

1234765101

1236803103

1290849437

1292405251

130043074

1304541205

1306352991

1322655470

1336067073

1350250754

1380896143

1386092744

1406455659

1418395020

1433303746

143629253

1455163268

1455742168

1457420719

1458975701

1499868407

1501922903

1545754914

1557989767

1568482678

1575119218

1662541974

1665126082

1680201874

1680586027

1694411451

1701648875

1753134293

1775656907

183596474

1857805694

187681422

1925696804

1928608458

1944913766

1968719184

2031799369

2084850560

2085494476

2091902242

21336891

214950889

2161096664

216777687

2182233325

2184630439

2187198051

2193997669

2198334698

2224902271

224017973

2253187682

2276264697

23146391

2332153945

2340184165

2348917033

2354820654

2361218180

2378130748

2388854597

2403993584

2458909760

2465149363

2487845889

2494249199

2519229707

2524380347

2526987152

2529408901

2550320370

2605123638

2608516337

2636510003

2663519398

2685146257

2709133931

2714120603

2715927287

2718510159

274817750

2753418190

2759911512

2776696732

2781896974

2825044701

2860045578

2867851366

2886076224

Best Mouseover Interaction Websites | Free Examples & Designs

Discover Mouseover interaction websites
built by the Webflow community

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

Discover Mouseover interaction websites built by the Webflow community

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

Discover Mouseover interaction websites
built by the Webflow community