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

Dhruv Sachdev

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 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.

Automatic Link Preview

Pablo Stanley

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

rotational-parallax-illustrations

Timothy Ricks

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

Jonas Arleth

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

Blur scroll effect for long screenshots in your portfolio

JP Dionisio

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

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 in Webflow | Free Template

Sergio Martos

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

Cloudz

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

Arnab Roy

Parallax Zoom Effect Experiment

Flux Academy

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

Trailing Images 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 Reveal Effect

Thomas Bosc

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 !

Fold & Unfold effect

Mayra Mendonca

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

This is a fun interaction with an image trailing effect. The idea is to follow the mouse and show a trail of images.

This effect uses vanilla JavaScript to paint images when hovering over links within a canvas element.

Image Trailing Effect

Will Gibson

A live grid hover effect inspired by Liveblocks.

[CLONEABLE] Live Hover Interaction

Protocore Studio

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..."

Discover effect websites built by the Webflow community

Discover effect websites built by the Webflow community