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

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

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

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

Timothy Ricks

Scrub GSAP Timeline on Mouse Move

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

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

Activator Studios

This section features layers of images that create a 3D parallax effect based on mouse movement.

parallax-hero-section

In this video we will explore creating a mouse follow trail effect with images pulled from a CMS collection. We'll use p5.js for our code and I'll show you how to load it up in Webflow to use as a cool hero section too!

Image Trail from CMS

102976941

1038319252

gpt-4.1-nano

1070795817

112746687

Get direct access to benefits like unlimited staging sites and more control over roles & permissions

Unlock more for your business with the

1131232030

Join client workspaces for free and add up to 5 users from your workspace

Guest access

Custom code and scripts won’t be supported.

Custom code

You won’t be able to export HTML and CSS files.

Code export

You won’t be able to manage site-level access and publishing.

Site-level roles & permissions

X sites exceed client seat limit. Excess seats will be removed.

Client seats

Staging sites will be unhosted with limited CMS, and no passwords or redirects.

Staging sites

1138017326

claude-sonnet-4-5

1186914386

1274323923

140432223

1462086697

1506258256

1567550242

1592612642

1609688815

1621889036

1631162196

1714859914

1726628865

1733785607

173927913

1771795565

1863160016

1905118106

1975670756

2025032126

2030598753

Outliant

Hireclix

Refokus

Kinetic

Heco

2144870841

2167006968

2216482092

2351366352

2355632600

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

2401116685

2486364096

gpt-4o

gpt-4.1

gpt-4o-mini

2493307210

2546957535

2789269995

2810548066

2842505721

284989039

285302288

2903381045

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

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

3022611874

3023147062

3026881092

3070246498

307653616

3079159973

3106924665

3108168977

3112069432

3120801339

3125710258

3151661775

3162101956

301 Redirects

Custom Code

Code Export

Site Transfer

Guest Access

Limited seats available, n sites will have client seats removed

Client Seats

Staging sites will be unhosted with limited CMS and no passwords or redirects.

Staging Sites

3201643127

3258716925

3266482432

3289310561

3313039722

3315729993

3387258362

3410497685

3452464914

3458155273

google/gemini-3-flash-preview

3590523401

3591394191

3669004489

3737116140

3801251705

3844506029

3879263312

Learn best practices for collaborating with clients in Webflow.

Sell your apps on the Webflow Marketplace.

Learn about structuring seats, roles, and permissions in your Workspace

Partner with Webflow to build your business alongside 2M+ creators and developers

Request access for your team to collaborate in a client’s Workspace.

Charge your client for a Site plan directly in Webflow.

Earn more by selling templates on the Marketplace.

Start building your site with AI, a prebuilt template, or from scratch.

Add your team members to start collaborating on sites.

Watch a quick intro to what you can build in Webflow.

3913199261

3934148661

3941255684

3951600357

3956476210

3960693283

3972857978

4063605209

4092855684

4103643638

4144203485

4178901499

4195171643

4206156914

451433404

489463363

504462606

536101258

540515386

612788821

614923236

655421556

657188092

660615456

665836192

737109165

772001133

817414265

846847440

879597835

882147072

911514507

938734410

968427424

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