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

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

Not the most performant of effects, but it could be tweaked it into something cool probably. Also, it was a good excuse to celebrate the new backdrop-filters 🎉 (this won't work in Firefox.)

✅ Native Interactions
✅ Custom Code (just one line of CSS)

--

Follow me on Twitter: https://twitter.com/kevinhaag
Subscribe on Youtube: https://youtube.com/kevinhaagsucks

Aurora Gradient

MM—015: Aurora Gradient

Watch the tutorial at https://www.youtube.com/watch?v=BNVSkKtHuns

Based on https://isabelmoranta.com/

Isabel Project Hovers

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

Here is a collection of various buttons I've found or tweaked from somewhere. They are all very cool and I though it'd be nice to put them all together for when you need some different buttons.

Massive Button Collection

Lots of Sweet Buttons

A cool little thing for you! 

There's a hidden section with empty CMS to help you copy/paste faster.

Party on!

Minim Full Screen Accordion

minim-full-screen-accordion

We added magnificent hover card effects to the design for a woman's beauty care brand. 🌊 Maybe you can guess that it focuses on products made with natural sea ingredients 🌊

Follow us:
 👉 dribbble.com/halolab
 👉 instagram.com/halolabteam

Transition hover effect product cards

Fensea Product Cards

Another week, another E-Commerce homepage! For this one we decided to use a mock male wellness brand that sells products for your mind and body. 

Fully cloneable. We hope you enjoy it!

Branding concept & assets created by Laezza Studio (https://www.behance.net/alelaezza)

ONE Male Wellness E-commerce Homepage Concept

Male Wellness E-Commerce Homepage Concept

The Institute researches the issues of today’s urban reality. Their students and contributors are eager to make the cities of the future sustainable, multicultural, safe and healthy. 

Spaces Urbanistic Interaction

Switching tabs with image swapping

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

I recreated the Disney+ Homepage featuring some of our favorite movies and shows. It includes an interactive nav menu and profile drop down and resizes for different screens and viewports. 

Feel free to share or check out my video tutorial on how I built it: https://www.youtube.com/watch?v=Yf-VamceqVE&feature=youtu.be

Disney+ Homepage Recreation

Memberstack

Happy Friday, everyone! 👋

I had some fun recreating the wonderful Yeti Login Codepen by Darin S. The project is 100% Webflow and relatively simple all things considered. I broke the SVG into parts, added a hover-over-element interaction to the background, & hover in / hover out interactions to the email, password, and login fields. 

The "rotating" head effect is created by moving close-up elements slightly more than background elements. I.e. the nose moves 11px to the left or right, while the mouth only moves 9px. The blue face SVG moves 6px, and the body doesn't move at all. 

Here's the link to the original project https://codepen.io/m3eu/pen/VwYBbwO

If you have any questions, feel free to drop a comment below. Thanks!

Yeti Login

Hi, I'm Matteo but you can call me zumat ;)
Actually, I'm studying interaction design at SUPSI in Mendrisio, Switzerland.
This project is a showcase of my personal works done during the Master of Arts in Interaction Design.

What you can find in my project?
A portfolio for an interaction designer.
This project is b&w-based and uses mouse hover animation.
All the works are created using the CMS function.

Inspired by Brandon Hyman.

Zumat | Interaction Designer

zumat - Interaction Designer portoflio

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

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

Minim Blog 2

Hunt Gather

Real food meets Real food with Chipotle's Tractor Beverages, available in restaurants across the US. Chipotle donates 5% of profits from Tractor Beverage sales supports the next generation of farmers. 

Bottle labels, landing page design, and webflow prototype by Hunt, Gather in Austin, Texas.

Chipotle x Tractor Beverages

Chipotle Tractor Beverages Launch

Design Credits- Tayler Odea
Thanks for giving me the opportunity to develop this beautiful site.

Main Features of Website-
1. Scroll Animations
2. Subtle Hover and Click Interactions
3. Horizontal Scrollable CMS
4. Cool Webflow Animations

Feel free to pinch me for your beautiful project at kingfactory1234@gmail.com

Thanks

LeaseLeads

Lease Leads | SaaS Wesbite | Made in Webflow

Happy Thursday! 

I took some time to revise one of Flowbase's open-source projects and added Memberstack to it. 

I added a fun hover interaction, removed/renamed a few classes, updated the page copy, change font sizes to make the prices feel smaller, and added Memberstack links to all of the buttons.

Note: you could use this template with Memberstack's pre-built UI (the one you see in the template now) or you could link directly to your own custom signup form. Totally up to you.

If you have any questions, feel free to drop a comment below. Thanks!

Discover hovereffects websites built by the Webflow community

Discover hovereffects websites built by the Webflow community