53 JavaScript Hover Effects

This Expanding Split-Screen Grid Navigation transforms standard menu items into an immersive, interactive gallery experience. It organizes content into a responsive grid where hovering over an item reveals a contextual background image, and clicking expands the section into a full-screen detailed view. This component is ideal for portfolios, featured article selections, or high-end agency landing pages where visual storytelling is key.

This Holographic 3D Interactive Card is a premium UI component inspired by rare physical trading cards. It features a sophisticated depth effect where the logo floats independently from the iridescent background, reacting dynamically to mouse movements or touch input. The use of modern CSS APIs ensures high-performance rendering of complex gradients and masks, creating a truly immersive “collectible” feel for digital assets.

This Split Staggered Reveal Card creates a dramatic, cinematic effect suitable for portfolios or featured content sections. Upon interaction, the background image recedes while two semi-transparent overlays slide in to create a high-contrast backdrop. Simultaneously, the title and description animate in with a precise staggered delay - letters for the title and words for the paragraph - powered by CSS variables.

This Cursor-Tracking Spotlight Reveal Effect creates a sophisticated “x-ray” or “flashlight” interaction. Initially, the user sees plain text. As the mouse moves, a circular mask follows the cursor, revealing a hidden image underneath and simultaneously inverting the text color to white within the circle. This technique adds depth and playfulness to portfolio links or gallery items without disrupting the layout.

This Hyperplexed Evervault Card Hover Effect utilizes dynamic character generation and CSS masking to create a high-tech “decryption” visual. It replicates the sophisticated card interactions found on the Evervault website, blending procedural text with mouse-responsive radial gradients.

This Interactive 3D Falling Leaves Shader is a sophisticated WebGL demonstration built with Three.js that showcases efficient rendering of thousands of unique objects. By utilizing InstancedMesh and custom GLSL shaders, it creates a stylized autumn tree where leaves respond to wind, sway realistically, and “die” (fall off) either randomly or through user interaction via raycasting.

This GSAP Sparkle Generate Button adds a touch of magic to standard call-to-action elements. Designed for AI generation tools or creative apps, it features a sophisticated hover effect where particles (dots) spawn and float organically around the button. The animation is driven by GreenSock’s Physics2DPlugin, simulating gravity and velocity for a realistic “dust” movement.

This Magnifying Glass Image Zoomer simulates a physical lens moving over a surface, making it ideal for product detail pages or photography portfolios. Unlike simple CSS transforms, this component uses JavaScript to calculate precise cursor coordinates and synchronizes a zoomed-in background image with a floating SVG overlay.

A calm static image that, upon hover, jitters, splits into RGB channels in bands, and slowly zooms in, evoking a digital glitch or cyberpunk atmosphere.

An interactive “liquid” image distortion effect powered by Three.js and custom GLSL shaders.

A holographic card effect driven by mouse tracking via JavaScript, which updates CSS variables to position dynamic gradients.

A visually dynamic and impressive effect where hovering over a static image transforms it into a complex, 3D-like collage, showcasing the capabilities of CSS transitions and imperative loading control.

A unique, visually impressive effect where the user moves a “liquid,” morphing lens to compare two scenes, demonstrating advanced use of SVG and DOM manipulation for visual UX.

An emotionally charged and technically complex component that uses kinetic animations simulating digital glitches or geometric transformations to dramatically reveal hidden content.

A visual illusion of “negative space” where the cursor acts as a physical object parting a dense curtain of threads, revealing the static text underneath.

A sophisticated magnetic navigation menu that uses JavaScript to map mouse proximity to CSS variables, driving smooth translations via translate. It features a configurable “follow” effect where a background pseudo-element glides between items based on bounding box coordinates calculated on hover.

An elegant, minimalist section featuring smooth typographic animation and interactive elements that engage the user by revealing visual context upon reading.

On hover, letters scatter chaotically, creating a dynamic, interactive explosion of text without complex animation libraries.

A high-tech, visually rich button that reacts to interaction with a burst of light tracing its borders, making the interface feel alive and responsive.

This interactive portfolio showcases a masonry-style layout built with two overlapping CSS Grids, where grid-row: span and grid-column: span create the complex pattern. The key interaction is a unique “spotlight” reveal effect on hover, powered by a JavaScript-controlled SVG <clipPath> that dynamically updates the position of a <circle> mask to follow the mouse.

Explore a variety of sophisticated hover effects, where complex animation patterns are created using advanced CSS selectors like :nth-child(-n + 3). These selectors target specific ranges of “cells” generated by Splitting.js.

This interactive grid showcases a mesmerizing “gooey” or “metaball” effect, achieved by applying an SVG filter to a liquid-like blob that smoothly follows the cursor. The entire experience is powered by a sophisticated combination of technologies: requestAnimationFrame for the performant cursor tracking, and SCSS using @for loops and custom functions to create unique, non-repeating @keyframes for each block’s animation.

This interactive digital collage is driven by a single, reversible gsap.timeline that animates dozens of absolutely positioned <img> elements into a cohesive illustration on hover. A key feature is the sophisticated text reveal, powered by GSAP’s SplitText plugin, which creates a fluid ‘waterfall’ effect. The entire composition is built to be fully responsive, using a custom SCSS --unit variable based on vmin to ensure the complex layout scales proportionally.

Live demo showcasing dynamic mix-blend-mode and background-blend-mode combinations. Interactive 3D tilt and SVG turbulence distortion trigger on hover.

A texture morphing effect with 3D rotation on hover, implemented using Three.js and shaders (GLSL). The fragment shader uses the snoise3 function (simplex noise) to create an organic mixing mask for blending two images.

An interactive 3D card effect where JavaScript tracks pointermove, calculates the relative cursor position, and passes it to --ratio-x and --ratio-y CSS variables, while CSS uses calc() to drive rotateX and rotateY.

Explore an interactive SVG fingerprint animation brought to life by the GSAP DrawSVGPlugin and a clever use of a GIF-textured stroke. Hovering over the button triggers the layered, staggered path animation for a satisfying “scan” reveal.

Explore a dual-interaction card where a 3D parallax responds to mouse movement, while a click triggers a “camera flash” and a comic-style text reveal. The hover effect uses throttled JS for performance, and the click animations are powered by GSAP.

A demo of how GSAP and Canvas 2D work together to create a grid of elements that react to the cursor using smooth vector transformation.

An implementation of Mouse Interaction with a grid of elements: each circle smoothly interpolates its radius towards a target using an ease factor for liquid-like animation, producing a smooth repulsion effect.

The Screen-to-UV technique calculates cursor distance to cells in an isometric grid; the result controls a CSS variable to generate a “living” 3D surface effect using pure CSS/JS.

This interactive portfolio leverages GSAP for smooth animations and a text scramble effect on hover, plus a dynamic background image that changes with a parallax effect for each project.

Technically, this GSAP and vanilla JS demo creates a multi-layered parallax effect, where each layer responds to mouse movement, and a drag gesture adds complex 3D rotation. The code is flexible, allowing you to switch between different shapes and visual styles.

This demo showcases a dynamic hover effect using CSS masks and JavaScript to reveal a stylized version of an image. The effect tracks the mouse, dynamically updating the radial gradient mask and providing a unique interactive element.