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

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

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

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

parallax-scroll-experiment

Parallax Zoom Effect Experiment

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

Flux Academy

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

ImageTrailEffect

Trailing Images Effect

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

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

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

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

Lightspeed

Element  → Lightspeed 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 :)

Tutorial - Blur effect behind navbar

Blur behind nav - Tutorial

1. Create a SECTION called foreground, change display to FLEX, center align it, and set its position to ABSOLUTE with a height of 100VH. Give it a COVER → FIXED background. Upload a blurred version of your photo.

2. Drop a DIV called MASK into the SECTION and customize it however you like. Set its position to ABSOLUTE with a Z INDEX of 1. For the zoom effect, simply add a CLICK interaction on the MASK.

3. Drop another DIV within MASK called PHOTO, set its width 100VW and height 100VH. Change its position to ABSOLUTE, give it a COVER → FIXED background, and upload the original image.

4. Add a PAGE TRIGGER interaction, select MOUSE MOVE IN VIEWPORT, and create an animation. Add MOVE interactions in the MOUSE X and Y panels.

MASK - Set X’s position to -50VW at 0% and 50VW at 100%. Set Y’s position to -50VH at 0% and 50VH at 100%.

PHOTO - Set X’s position to 50VW at 0% and -50VW at 100%. Set Y’s position to 50VH at 0% and -50VH at 100%.

That's all folks :)

Discover effect websites built by the Webflow community

Discover effect websites built by the Webflow community