Fundamentals

Buttons Text & Typography Forms Navigation & UI Loading

Design & Visuals

Backgrounds Glass & Morphism Visual Effects Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Depth Cursors

Gallery & More

Cards & Layouts Gallery & Media Data & Visualization Atmosphere Utilities
All Effects New Favorites Templates Blog Tips ✨ Go Premium

Hover & Interactions

Hover effects, micro-interactions, interactive elements and physics.

How do you create hover interactions that engage your visitors? These 48 hover effects cover every style: scale, glow, 3D tilt, content reveal and animated underlines. Essential for cards, buttons, links and images on any website.

Scale & Rotate

Scale & Rotate

Scale up with a slight rotation.

CSS Transform
BG Slide

Background Slide

The background slides from left to right.

CSS Background

Border Gradient

Gradient border that appears on hover.

CSS Border

Shine Effect

Light reflection that sweeps across the element.

CSS Light

Underline Expand

Line that expands from the center.

CSS Line

Icon Bounce

The icon bounces on hover.

CSS Animation

Color Shift

Smooth color transition.

CSS Color

Blur Reveal

The blurred element becomes sharp on hover.

CSS Filter

Shadow Inset

Glowing inner shadow.

CSS Shadow

Tilt 3D

Perspective tilt on hover.

CSS 3D

Shutter Reveal

Shutter effect that opens on hover.

CSS Reveal

Glitch Hover

RGB glitch effect on hover.

CSS Glitch

Fill Up

Bottom-to-top fill with ease-quart curve. Inspired by Daily Delights.

CSS Fill Bezier

Filter Animated

GPU-optimized CSS filter animation with will-change.

CSS Filter GPU

Spotlight Effect

Spotlight effect that follows the cursor on the element.

JS Mouse Light

Magnetic Pull

The element is attracted to the cursor with a magnetic effect.

JS Mouse Physics

Elastic Scale

Scale up with elastic curve and natural bounce.

CSS Bezier Scale

Gradient Shift

Animated gradient that speeds up on hover for a dynamic effect.

CSS Gradient Animation
423 likes

Like Heart

Like button with pop animation, propagation ring and colorful particle burst on click.

CSS Animation Interactive

Bookmark Toggle

Save button with drop animation, background fill and color transition.

CSS Toggle Animation

Submit Button

Submit button with circular morphing, loading spinner and success check animation.

CSS JS States

Ripple Click

Material Design ripple effect on click. The wave spreads from the contact point and fades out.

CSS JS Material

Pull to Refresh

Mobile pull-to-refresh simulation with rotating indicator, content displacement and loading spinner.

CSS JS Mobile

Notification Bell

Bell with shake animation, counter badge with pop-in and sliding notification toast.

CSS JS Notification

Star Rating

Rating system with pop and rotation animation on each star. Dynamic labels based on the rating.

CSS JS Rating

Switch with Icons

Switches with icons embedded in the knob, bounce animation and color change.

CSS Toggle Icons

Copy to Clipboard

Copy button with icon transition (copy → check), success color and "Copied" tooltip.

CSS JS Clipboard

Confetti Button

Button that triggers a colorful confetti burst with realistic gravity and rotation.

JS Canvas Animation
Draw with your mouse

Paint Brush

Glowing brush that leaves a colorful trail.

Canvas Draw Creative

Repel Particles

Particles that flee from the cursor.

JS Particles Physics

Text Scramble

Text that decodes on hover.

JS Text Decode

Elastic Drag

Draggable element with elastic return.

JS Drag Spring

Scratch Reveal

Scratch to reveal the hidden content.

Canvas Reveal Game

Morph on Click

Shape that transforms on each click.

CSS JS Transform

Live Typing

Each character appears with animation.

JS Keyboard Animation

Sound Visualizer

Bars that react dynamically.

JS Audio Visual

Magnetic Letters

Letters attracted to or repelled by the cursor.

JS Physics Text

Gravity Drag

Elements that fall with gravity once released.

JS Physics Drag
Click to add balls

Gravity Simulation

Balls subjected to gravity with bounce.

JS Physics Interactive

Elastic String

Elastic string that reacts to the cursor.

JS Elastic Mouse

Magnetic Field

Particles attracted by a magnetic field.

JS Magnetic Particles

Newton's Cradle

Pendulums with kinetic energy transfer.

JS Pendulum Energy

Liquid Simulation

Drops that merge and separate.

JS Fluid Metaball

Spring Physics

Elastic animation with spring effect.

JS Spring Bounce

Collision Detection

Balls that bounce off each other.

JS Collision Physics

Cloth Simulation

Interactive cloth simulation.

Canvas Cloth Interactive

Newton's Cradle

Newton's cradle with energy transfer.

Canvas Physics Momentum

Rope Physics

Interactive rope with physics simulation.

Canvas Verlet Draggable

Fluid X-Ray Reveal

The cursor "scans" and reveals a hidden layer — here, the same person in costume. Fluid trailing mask. Before/after, normal/disguised, day/night: the 2nd layer can be anything.

💡 Perfect for: before/after, "see the costume", Halloween party teaser, visual comparison, portrait easter egg.

CSS Mask Vanilla JS Hover Premium

Scratch Coupon Reveal

A scratch card that reveals a promo code, then lets users copy it. Tactile, gamified interaction that showcases your offer. Code and reveal threshold are both customizable.

💡 Perfect for: promo codes, contests, loyalty programs, Black Friday, offer pop-ups, e-commerce gamification.

Canvas Scratch Coupon Premium

Gift Unwrap Reveal

A gift that spins on itself, lid lifting to reveal a promo code (or any content) with a bouncy spring animation and a burst of sparks. A memorable way to unveil a festive offer. Code is fully customizable.

💡 Perfect for: Christmas promo codes, offer reveals, contests, holiday greetings, surprise calendars, festive e-commerce.

Vanilla JS Reveal Festive Free

Frequently Asked Questions

What is the best hover effect for a card? +

The lift effect (translateY(-8px) + box-shadow) is the most popular and effective. It creates a sense of depth without being distracting. Add a border-color transition to enhance the visual feedback.

How to create an animated underline on hover? +

Use a ::after pseudo-element with position:absolute, bottom:0, height:2px, and width:0. On hover, animate width to 100%. For a center-out effect: left:50%, transform:translateX(-50%), animate width.

How to create a 3D tilt effect on hover? +

Listen for mousemove on the card. Calculate the cursor position relative to the center. Apply transform: perspective(1000px) rotateX(Xdeg) rotateY(Ydeg) with the calculated angles. Add a transition for smoothness.

Do hover effects work on mobile? +

No — there is no hover on touch devices. Use @media (hover: hover) to target only devices with a pointer. On mobile, replace with click/tap effects using :active or JavaScript.

How to animate an image on hover? +

The most popular effects: zoom (transform: scale(1.1) inside overflow:hidden), appearing overlay (pseudo-element with opacity), filter (grayscale to color), and clip-path revealing hidden content.

Similar Categories

🔘

Buttons

27 effects

 🖱️

Cursors

26 effects

 🎬

Transitions

50 effects