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

Here are 20 Plug & Play CSS-only link hover effects for your next project! 

Subtle line animations can be a simple way to enhance your site experience through delightful micro-interactions.

Inspired and adapted for Webflow from: https://github.com/codrops/LineHoverStyles

*includes 21 effects, but 20 sounds cleaner.

20 Link Effects

20 Line Hover Animations

Let site visitors preview external links by hovering over the text. This plug-and-play feature allows you to get a link preview without leaving :)

How it works:
It extracts external links on load, grabs a screenshot then reveals the preview on hover. 

Since the card's position is calculated using custom code - it works with inline links and link blocks.

Just change the external link, and the preview will be updated automatically. Replace the demo screenshot API I've used with your own on live builds.

The project also includes a static version where you can manually upload a preview if you prefer—inspired by https://uiw.tf components. Fully built-in Webflow.

Popup Links

Automatic Link Preview

Playing with Rotational Parallax and illustrations from Open Doodles
https://www.opendoodles.com/

Rotational Parallax Illustrations

rotational-parallax-illustrations

Rebuild of the https://k72.ca/en nav menu

This cloneable is for learning purposes only. I do not own the rights to this design and content.

K72 Menu

This is a cool project that I found in Code Pen.
I tried to do it in Webflow and learned along the way.
Looks best in Safari

Inspired by a pen of Simon Goellner.
You can find it here: https://codepen.io/simeydotme/pen/PrQKgo

And was able to create the blend modes through Vincent's work.
You can find it here: https://webflow.com/website/My-Webflow-Sandbox

Feel free to clone this.
Enjoy! :)

Pokemon Card Holo Effect

We build a cool parallax blur scrolling animation that is great to use in your portfolio. Especially as a web designer, you often make longer screenshots of your client projects, which can be showcased very well with this scrolling effect. I use a blurry background, which is basically the same image as in the foreground, but blurred by its filter and gives the whole design a great mood.
The project is as always free to clone in my Webflow Showcases!

Tutorial: https://youtu.be/5NNR5DExNGU

Webflow Scroll-Animation for your Website Portfolio

Blur scroll effect for long screenshots in your portfolio

A simple project using parallax effects and animations. Now clonable!

Cloudz

A 3D scroll animation that lets you slowly rotate a tablet towards the viewer while scrolling. You can even use animated videos instead of a static image. I use this setup in one of my case studies in my portfolio.

Watch the Tutorial: 
https://youtu.be/yX_KhCuMx_Q

3D Tablet Scroll Animation | Free Template

3D Tablet Scroll Animation in Webflow | Free Template

parallax-scroll-experiment

Parallax Zoom Effect Experiment

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

Flux Academy

We used the code from - 
https://tympanus.net/Development/ImageTrailEffects/
to recreate the effect using Webflow

ImageTrailEffect

Trailing Images Effect

Landing Page design for Desktop Vision 
It is designed to be simplest and easiest remote desktop software to use. It also supports WebXR which allows you to project your desktop into augmented or virtual reality.

Full website: desktop.vision

Desktop Vision

Desktop.vision

Here's a little tutorial project on how to fold and unfold anything in Webflow !

Feel free to follow me on twitter for more tips and tutorials :  https://twitter.com/est_ce_thomas

Thank you !

Unfold Effect

Fold & Unfold effect

This is a hover effect for a portfolio card. When hovered, the card image expands and fades into a video. This has been an effective technique to give a glimpse of each project to the user. An infinite marquee is then overlaid to create a slick effect. 

You can easily modularize this by connecting to your CMS.

Portfolio Hover Effect

Portfolio Reveal Effect

Lightspeed

Element  → Lightspeed Effect

This is a rebuild of the sticky interaction effect on the new iPhone Xs page. After scrubbing through youtube tutorials, many webflow forum posts and just plain ol' fiddling around with settings, I finally achieved something pretty close.

I look forward to seeing you all clone away and make something more awesome with this.

🐙✌🏼

Sticky Effect

iPhone Xs Sticky Animation Effect

We are developing the first feature length game in Webflow based on Lord of the Rings called Memories of Middle-Earth. Enjoy this teaser and follow our progress on Twitter as we build in public.

https://twitter.com/SarkisBuniatyan/status/1431262516596727813

"...ash nazg thrakatulûk agh burzum-ishi krimpatul... One Ring to rule them all, One Ring to find them, One Ring to bring them all and in the darkness bind them..."

Ring of Power

Element → Ring of Power

Here is a short tutorial to the popular effect of blurring elements scrolled behind the nav.

I hope you enjoy it :)

Discover effect websites built by the Webflow community

Discover effect websites built by the Webflow community