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

When you hover over a tool, it'll reveal a thumbnail preview of the website you're about to visit, and the image will follow your cursor around (behind the content) as you hover over the link.

Flowmingo Mini #6 - Final

Image Reveal on Hover & Mouse Cursor Follow Interactions

The images appear as you hover, they stick to the mouse and overlay the text. This effect could be used well in a portfolio or as a listing of services.

Watch the tutorial:
https://youtu.be/98XsJAtAYyM

Text Grid with Magnetic Images on Hover

A simple way to create a cursor tooltip in Webflow, which fades in when hovering over a certain element and follows the mouse pointer. This could be used for example for teasers that link to the next project in your portfolio.

Tutorial: https://youtu.be/YwW_cRpZDr0

Mouse Tooltip Next Project

Mouse Tooltip Next Project Teaser

A sweet hover effect that can span across multiple cards at the same time! 

Highlight the (simulated) border of the card and the neighbouring cards.

Custom code is used to pass the cursor position over to the surrounding cards. Inspired by https://linear.app

Glow Cards

Glowing Cards on Hover

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 Animation with Image Preview

Table hover effect with image reveal

Hi my gorgeous friends of Webflow,

This project contains an infinitely looping marquee with stop on hover.
Just a bit of css needed to build a pretty fancy functionality. :)

But if you feel adventurous, click on the button to activate jQuery super-powers! :)

Enjoy and feel free to leave a comment!

******* PROJECT UPDATE *******
Just added a second page to the project to account for vertical marquee scrolling! :)

******* YOUTUBE TUTORIAL *******
Attributes-only solution tutorial available at:
https://youtu.be/lfWS_E_pOlg

P.S. Feel free to visit my YouTube channel:
https://www.youtube.com/@francescocastronuovo

Infinite Marquee With Stop On Hover

ZealousWeb

The most lucrative feature of a website is the ability to play background video when users hover their mouse over it. Using ZealousWeb’s Background Video on Hover for Webflow creates a gallery of image thumbnails that will play video on hover.

The Background Video on Hover component supports lightbox mode, where you can view images and videos on a larger scale. Using this component, you can also play background videos on hover on mobile devices.

The Background Video on Hover component is a standard component primarily used in websites these days, showcasing your creativity and enhancing the customer experience. We have created a background video autoplay on hover. This component features a section where users can hover on a title, and it auto-plays the video in its background while displaying the title’s description.


Video Auto Play On Hover

Video Autoplay On Hover

Welcome to our Gradient effect on hover project!

In this project you can find nice gradient effect on hover that made by using only Webflow interaction. you can clone this project or make your own using our tutorial. Feel free to comment if you have any question!

Gradient Button

Gradient Effect on Hover

A fixed background image that is revealed by mouse hover all over the section

https://www.tiny-resources.com/elements/hover-to-reveal-mask

Hover Reveal Mask

Hover to reveal Mask

Hi my gorgeous friends of Webflow,

A few days ago I stumbled upon a fancy glitch animation on hover, and I wondered if that could be done in Webflow with absolutely no code.

The answer is YES! And you will see it in the top left part of the page.
In the bottom right corner, an experiment of mine. 😊

You just need to play a bit with filters, move transforms, and Webflow animations and interactions.

I think these could be great for a logo in the navbar.

Enjoy, clone, and feel free to leave a comment!

Have an awesome Webflow journey y'all,
Francesco

P.S. Feel free to visit my YouTube channel:
https://www.youtube.com/@francescocastronuovo