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

Master Flowmaker

Full Image Card Hover

Inspired by @eight.seconds

081 - 100 days of @webflow interactions

#81 Full Image Card Hover

Francesco Castronuovo

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

Robin Granqvist

This is another small hover interaction thingy similar to what you'll find on sites all over the web. Feel free to clone and use for whatever 🤙

Open Roles List Interaction

This is just a small list hover interaction that I've seen being used on Awwwards sites etc.

Feel free to clone and use for whatever 🤙

(It's using Google's Material Icons through the CDN, so it may look a bit funky inside the project).

Small List Hover Interaction

Bjorn Encuțescu

Can a complex game menu such as Battlefield 4's one be built in Webflow?
Yes!

Almost no code was used, I used just a little for insignificant stuff such as linking links to tabs or creating custom scroll bars.

Clone it and have a look through it.

Tutorials incoming on my YouTube channel, subscribe 👉 youtube.com/channel/UCgwvah4M6Anta4_5ACFiuRQ

__

• Do you need web design & development? Get in touch 👉 bjorn-encutescu.webflow.io/

• Follow my daily tips on Instagram 👉instagram.com/bjorn_encutescu/

Battlefield 4 Webflow Rebuild

Bradley Stallcup

I love this gallery from TyCreated soooo much!
It's the same but I added a lightbox feature on click and removed the CMS so you can copy and paste it faster. Thanks Ty keep em' coming!

Slick Lightbox Gallery

These tabs are perty neat.

*Be sure to copy the Section called COPY ME so you don't have to unlink all the collection items.*

There's a neat hover interaction on the items thanks to a slick template from tycreated. Check out his templates for they are insanely cool and free.

Ok have at it! Enjoy!

Slick Underline Tabs

Dilshad Khaliq

A simple hover effect for images using different SVG filters.

Each image has different filters applied to it. Make sure to have a Unique ID for each filter.  

svg-filters-on-image-using-gsap

As swell navigation menu for those you who like hover effects, need some images love and sweet interactions.

Swell Nav Menu w/ Hover Parallax Images

Hi my gorgeous friends of Webflow!

By playing with Webflow IX2 or with a simple CSS workaround, you can build a linear gradient animation on hover for your buttons. :)

Enjoy, and feel free to leave a comment!

Have an awesome Webflow journey y'all,

Francesco

--------------------------------------------

UPDATE - 2022/02/22: Just added an infinitely looping version for both the animations. :)

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

Button Linear Gradient Animation

Had the pleasure to work with Flooz on their new Flooz.world website. I only worked on the Webflow development, the design and everything else was created by their team.

Check out their live website and updated website: flooz.world

---

• Do you need web design & development? Get in touch 👉 bjorn-encutescu.webflow.io/

• Follow my daily tips on Instagram 👉instagram.com/bjorn_encutescu/

Flooz World

Duncan Hamra

Check it out!! 

100% native Webflow tooltips that are easy to use and customize. I've tried using custom code solutions in the past, but they limited my design control and I often broke them. These aren't simple (per se) but they are easy to work with once you know how to handle them. 

I hope they serve you well!

Native Webflow Tooltips

Anil Pervaiz

Text Hover Animation Webflow Interaction Cloneable.

Text change its position when you hover on circle.

Clone and enjoy!

Text Hover Animation Webflow - Cloneable

I recently saw a really cool interaction on https://www.usestir.com, so I decided to try to remake it.

Clone & have fun 🤙

Stir Card Interaction Remake

I've seen companies that offer a card with a QR that links to a digital business card and I thought, why would I pay for that when I can make it. 

Use this to start one of your own if you'd like.

Digital Business Card

Heres a pretty neat blog page for you. Copy the collection at the bottom for easier set-up.

Minim Blog 2

Hi my gorgeous friends of Webflow,

Who said you can't build geometric patterns with Webflow? :)

Merge a bit of creativity with a few skew transforms and you can build a seamless geometric pattern and add a border animation with completely no code.

Just move your mouse over the pattern for a bit of color!

Enjoy 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

Seamless Geometric Pattern With No Code Border Animation

Daniel Cobb

This is an update to my orignal 4 column hero - this time the interactions are smoother, the columns hold more content and its responsive on all breakpoints - no extra tabs to edit.

Discover hoverinteraction websites built by the Webflow community

Discover hoverinteraction websites built by the Webflow community