Glowing Interactive Dots Grid
A glowing interactive dots grid built with modern frontend techniques for responsive and reusable UI.
Hover Effects
60 snippetsWelcome to the Hover Effects resource page — a curated directory for developers. Browse practical UI patterns, specialized libraries, and small interactive demos. Use the table of contents to explore subcategories below.
javascript-hover-effects
Snippets(60)
- Marbling Hover Ink with Inversion Effect
A marbling hover ink with inversion effect built with modern frontend techniques for responsive and reusable UI.
- Three JS Bubble Hover Animation
A three js bubble hover animation built with modern frontend techniques for responsive and reusable UI.
- Interactive Mystery Card Hover Effect
A interactive mystery card hover effect built with modern frontend techniques for responsive and reusable UI.
- Pixel-Canvas Web Component
A pixel-canvas web component built with modern frontend techniques for responsive and reusable UI.
- Kinetic Typography Experiment GSAP
A kinetic typography experiment gsap built with modern frontend techniques for responsive and reusable UI.
- Image Follows Cursor on Nav Item Hover
A image follows cursor on nav item hover built with modern frontend techniques for responsive and reusable UI.
- Animated Underlines with SVG
A animated underlines with svg built with modern frontend techniques for responsive and reusable UI.
- Canvas Hover Grid Portfolio
A canvas hover grid portfolio built with modern frontend techniques for responsive and reusable UI.
Fingerprint Scan AnimationA fingerprint scan animation built with modern frontend techniques for responsive and reusable UI.
- Full-Screen Image Zoom on Hover
A full-screen image zoom on hover built with modern frontend techniques for responsive and reusable UI.
GSAP Interactive Table with Hover EffectsA gsap interactive table with hover effects built with modern frontend techniques for responsive and reusable UI.
GSAP Magic Hover AreasA gsap magic hover areas built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 49+, Safari 10+, Firefox 52+, Edge 79+Features
Floating Background, GSAP Animation, Focus Tracking, Dynamic Resize- GSAP SplitText + ScrambleText Cursor Effect
A gsap splittext + scrambletext cursor effect built with modern frontend techniques for responsive and reusable UI.
- Hero Mask Reveal with Filter Effect
A hero mask reveal with filter effect built with modern frontend techniques for responsive and reusable UI.
Hover Interaction (98/100)A hover interaction (98/100) built with modern frontend techniques for responsive and reusable UI.
Icon Grid Follow Mouse Effect (GSAP & Canvas)A icon grid follow mouse effect (gsap & canvas) built with modern frontend techniques for responsive and reusable UI.
- Interactive Glass Lens Effect with Sound
A interactive glass lens effect with sound built with modern frontend techniques for responsive and reusable UI.
Magnifying Glass Image ZoomerA magnifying glass image zoomer built with modern frontend techniques for responsive and reusable UI.
Technologies
JavaScript, Pug, StylusDifficulty
IntermediateBrowser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13+Features
Pointer Tracking, Wheel Zooming, Edge Detection
Repetition Image AnimationA repetition image animation built with modern frontend techniques for responsive and reusable UI.
- SVG Filter Sticker Effects
A svg filter sticker effects built with modern frontend techniques for responsive and reusable UI.
- WebGL Grid Gallery
A webgl grid gallery built with modern frontend techniques for responsive and reusable UI.
Interactive Grid with Gooey Blob EffectA interactive grid with gooey blob effect built with modern frontend techniques for responsive and reusable UI.
Photo Gallery with a Comic TouchA photo gallery with a comic touch built with modern frontend techniques for responsive and reusable UI.
- Direction Aware Hover (In & Out)
A direction aware hover (in & out) built with modern frontend techniques for responsive and reusable UI.
Chromatic Aberration Logo Effect on HoverA chromatic aberration logo effect on hover built with modern frontend techniques for responsive and reusable UI.
- Flex Cards Expand on Hover
A flex cards expand on hover built with modern frontend techniques for responsive and reusable UI.
- Magnetic Glow Cards
A magnetic glow cards built with modern frontend techniques for responsive and reusable UI.
Multi-Card Glow HoverA multi-card glow hover built with modern frontend techniques for responsive and reusable UI.
GSAP Sparkle Generate ButtonA gsap sparkle generate button built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
Particle System, SVG Animation, Physics Simulation, Timeline Sequencing
Canvas Proximity Mask EffectA canvas proximity mask effect built with modern frontend techniques for responsive and reusable UI.
Interactive GSAP Collage AnimationA interactive gsap collage animation built with modern frontend techniques for responsive and reusable UI.
- Animated Hover Disclosures
A animated hover disclosures built with modern frontend techniques for responsive and reusable UI.
Photo Animation on Text HoverA photo animation on text hover built with modern frontend techniques for responsive and reusable UI.
Split Staggered Reveal CardsA split staggered reveal cards built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 88+, Edge 88+, Firefox 87+, Safari 14+Features
Text Splitting, Staggered Animation, Pseudo-elements, Keyboard Accessible
Tilt Grid Content RevealA tilt grid content reveal built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
3D Hover Tilt, Grid Expansion, Staggered Typography, Scroll to Top
Expanding Split-Screen Grid NavigationA expanding split-screen grid navigation built with modern frontend techniques for responsive and reusable UI.
Technologies
Pug, SCSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 45+, Edge 15+, Firefox 35+, Safari 9+Features
Responsive Grid, Staggered Animation, Hover Preview, Tabbed Content
Hover Image Reveal Custom CursorA hover image reveal custom cursor built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 49+, Edge 16+, Firefox 54+, Safari 10.1+Features
Custom Cursor, Image Reveal, State Delegation, Blend Modes
Extreme Hover with HTML and CSSA extreme hover with html and css built with modern frontend techniques for responsive and reusable UI.
Cursor-Tracking Spotlight Reveal EffectA cursor-tracking spotlight reveal effect built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 88+, Edge 88+, Safari 14+, Firefox 86+Features
CSS Clip-Path, Mouse Tracking, Spotlight Effect, Dual-Layer Typography
Image Hover EffectA image hover effect built with modern frontend techniques for responsive and reusable UI.
Invisible GalleryA invisible gallery built with modern frontend techniques for responsive and reusable UI.
Magnetic LinksA magnetic links built with modern frontend techniques for responsive and reusable UI.
Multi-Card Spotlight EffectA multi-card spotlight effect built with modern frontend techniques for responsive and reusable UI.
Scrambling Letter Effect on HoverA scrambling letter effect on hover built with modern frontend techniques for responsive and reusable UI.
Hyperplexed Evervault Card Hover EffectA hyperplexed evervault card hover effect built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13+Features
Dynamic Masking, Random Character String, Mouse Tracking, Mix-blend-mode
Sketch ButtonA sketch button built with modern frontend techniques for responsive and reusable UI.
Fancy Image Hover Effects with Splitting.jsA fancy image hover effects with splitting.js built with modern frontend techniques for responsive and reusable UI.
Animated Portfolio with SVG ClipPath Hover EffectA animated portfolio with svg clippath hover effect built with modern frontend techniques for responsive and reusable UI.
Interactive 3D Layered Text Wave EffectA interactive 3d layered text wave effect built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 36+, Edge 12+, Firefox 16+, Safari 9+Features
Mouse Tracking, Linear Interpolation, Auto-simulationResponsive
Yes
3D CSS Grid Inverse UV Projection EffectA 3d css grid inverse uv projection effect built with modern frontend techniques for responsive and reusable UI.
Technologies
JavaScript, CSS3Difficulty
AdvancedFeatures
3D Projection, Interactive Grid, UV Mapping
Interactive Glowing Grid CardsA interactive glowing grid cards built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 60+, Safari 11+, Firefox 55+, Edge 79+Features
Mouse Tracking, Dynamic Gradients, Hover Glow, Responsive GridResponsive
Yes
Turbulence Effect with Blend ModesA turbulence effect with blend modes built with modern frontend techniques for responsive and reusable UI.
Difficulty
advancedFeatures
SVG filters, CSS blend modes, 3D transformsResponsive
Yes
Cinematic Parallax Reactive Navigation MenuA cinematic parallax reactive navigation menu built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13.1+Features
Background Shifting, Parallax Interaction, State-Driven StylingResponsive
Yes
Glitch Image Hover Effect with ShadersA glitch image hover effect with shaders built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, three.js, GLSLDifficulty
AdvancedFeatures
RGB split, Digital jitter, Interactive hover, Shader-based animation
Image Displacement with Three.jsA image displacement with three.js built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, Three.js, GLSLDifficulty
AdvancedFeatures
Texture Morphing, Simplex Noise, GPU Accelerated
Image Hover Effect with ShadersA image hover effect with shaders built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, Three.js, GLSLDifficulty
AdvancedFeatures
Liquid Distortion, Interactive Cursor Following, GPU Accelerated
Interactive 3D Falling Leaves ShaderA interactive 3d falling leaves shader built with modern frontend techniques for responsive and reusable UI.
Technologies
JavaScript, HTML, CSSDifficulty
AdvancedBrowser support
Chrome 84+, Edge 84+, Firefox 63+, Safari 14.1+Features
Instanced Rendering, Custom GLSL Shaders, Raycasted Interaction, Dynamic Matrix UpdatesResponsive
Yes
Holographic 3D Interactive CardA holographic 3d interactive card built with modern frontend techniques for responsive and reusable UI.
Technologies
Pug, SCSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 85+, Edge 85+, Safari 16.4+, Firefox 128+Features
3D Perspective, Pointer Tracking, Iridescent Gradients, Holographic ShimmerResponsive
Yes
Interactive Canvas Particle Image EffectA interactive canvas particle image effect built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13+Features
Particle System, Color Extraction, Hover RevealResponsive
Yes