RMv0YJlLOBe7cY7HgZ3Jox34R0Wrk7jLv3DZyBETA7I=

ZC8pa382rux3/Ya5JYmbaiFDJJqVQfa/ZkKRoDwNIOg=

zRYikcIlbF3Un7C26+4VGO/t8jKwNjjuAdQWLlZECTQ=

/zPeDB00QSmJg02UNPvvY6N+w7bL9XbOTmOZn0UHdA0=

9DmxyyZ8FEsc5DSKm/8DpcDu2e/GCLlCF0UJQCEBuSw=

Pesmw2FSIduSR93sJEVAEAHyJZ4MQP9Pbn1gPgXxcXw=

l+2HpTI8qsEqSoxz6Y8y+po4C4+PakSbBdZ2Wp0L/Zk=

p8RKstqTUsFv0yM8P1EiWUksDkzfBxAw5OAvX/lo29w=

xdTyVT3ZuBSNWCl2NPxJ8eZ0ifhUzatwezSwUElWFy0=

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

A live, drawing canvas where you can influence the pixels. 

Interactivity can make visitors feel engaged in a fun way. I used sketch.js for the drawing canvas. Use your cursor or touch to draw right on the screen.

David's portfolio - https://www.davidfiz.com was one of the most pleasant landing pages I've seen, and I wanted to see if I could rebuild it with a touch of design. I have layered lots of interactions on top. Sketch.js is used for the drawing effect.

Interactive Sketch Portfolio

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

Description

More by Dhruv Sachdev