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

Joseph Amato

Apple changed its homepage for a short period to support 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://web.archive.org/web/20200309051055/https://www.apple.com/

It's not a perfect replication, for instance, Webflow's mouse move interaction doesn't translate to mobile. But I'm happy to hear suggestions on how to improve it. 

Regardless, feel free to clone and make it your own!

Apple International Women's Day 2020

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

Jakob Wrs

OGL (lite version of webGL)

https://github.com/oframe/ogl

ogl mousemove effect

Josh Jacobs

Saw this cool interaction by UI8 on Dribbble and had to try and recreate it! I liked this concept as a hero space, so I added a modern nav to it that goes vertical on MVP to compliment the space. Let me know what you think in the comments, and clone away!

Design credit: "Call to Action" by Anton Tkachev for UI8 (https://dribbble.com/shots/6479771-Qaitomo-Call-To-Action),

Rad Mouse Movement Hero! - Joshwork Dribbble series ft. UI8

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

Protocore Studio

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

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

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

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

Timothy Ricks

Watch tutorial at https://www.patreon.com/posts/scrub-gsap-on-81347707

Design from https://decimalstudios.com/work

Scrub GSAP Timeline on Mouse Move

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

Mason Pajunas

Portfolio website for multidisciplinary creative, Rachel Bavaresco.

Rachel Bavaresco - 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

Discover mouseover websites built by the Webflow community

Discover mouseover websites built by the Webflow community