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

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

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

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

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

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

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

Minim Parallax Hover Image Nav

Swell Nav Menu w/ Hover Parallax Images

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 (our copy)

Flooz World

Bookmark

Full Image Card Hover

Inspired by @eight.seconds

081 - 100 days of @webflow interactions

#81 Card Hover

#81 Full Image Card Hover

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

svg-filters-on-image-using-gsap

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!

Webflow Tool Tips

Native Webflow Tooltips

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

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

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 Border Animation

Seamless Geometric Pattern With No Code Border Animation

Text Hover Animation Webflow Interaction Cloneable.

Text change its position when you hover on circle.

Clone and enjoy!

Text Hover Animation

Text Hover Animation Webflow - Cloneable

Hello Everyone, This is the Solar System, Made with Finsweet's recently launched product 3D Globe, Its very easy to create a globes now.

Visit 3D Globes by Finsweet here: https://www.3dglobes-wf.com/

The Measurements are not correct, Please Ignore that, Its my own solar system! 

Background is made using Particle.js

You can find me in the solar system if you want to, I am chilling on earth and you can clone the project for yourself as well, and make improvements as you wish.

The Solar System

The Solar System Made With Finsweet-X-Weglot 3D-Globe

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.

Discover hoverinteraction websites built by the Webflow community

Discover hoverinteraction websites built by the Webflow community