RSK World - Image Hover Effects | Zoom, Overlay, Transform, Reveal, 38 CSS Effects | RSK World

Zoom & Overlay Transform & Reveal Advanced & Unique Pro Effects Vanilla JS

Image Hover Effects is a collection of 38 stunning image hover effects in 7 sections. Features: zoom (in/out), overlay (fade, slide up, zoom+overlay), transform (rotate, flip, skew), reveal (left, right, circle), advanced (Ken Burns, grayscale→color, RGB glitch, shine sweep, blur focus, blinds reveal, corner peel, 3D tilt, split diagonal, morph blob), pro (squares pop, sepia vintage, ripple wave, flip X, zoom+rotate, image stack, spotlight, magnify, film grain, wipe reveal), extra (bounce, slide center, border expand, duotone, scale rotate, icon pop). Pure CSS; 3D Tilt, Spotlight and Magnify use minimal JS. HTML, CSS, Vanilla JavaScript. By rskworld.in.

If you find this Image Hover Effects project useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download Image Hover Effects

Zoom & Overlay Effects

Zoom in/out (scale on .img-wrapper or img). Overlay: fade, slide up, zoom+overlay. All pure CSS with transitions. Overlay content in .overlay with opacity/transform. CSS variables: --primary, --overlay-bg.

Zoom: transform scale(1.15) or scale(0.9) on hover
Overlay: opacity 0→1, translateY(100%)→0, scale(0.8)→1
Base .effect-card with .img-wrapper, .overlay
CSS variables: --primary, --primary-dark, --overlay-bg

Project Structure & Files

image-hover-effects/ with index.html (demo of all 38 effects), css/styles.css (all effect styles), js/tilt.js (3D tilt), js/pro-effects.js (Spotlight & Magnify). No build step. Open index.html or serve folder.

image-hover-effects/ – index.html, css/styles.css, js/tilt.js, js/pro-effects.js, README.md, LICENSE
No build step – open index.html or static server
Font: Segoe UI, system-ui; Font Awesome 6.5.1 (CDN)
Zero dependencies; vanilla HTML, CSS, JavaScript

Transform & Reveal

Transform: 3D rotate, card flip (flip-inner rotateY), skew. Reveal: left/right (clip-path inset), circle (clip-path circle). Smooth cubic-bezier transitions.

Transform: perspective(1000px) rotateY/X, backface-visibility: hidden
Reveal: clip-path inset(0 100% 0 0) → inset(0 0 0 0)
Circle reveal: clip-path circle(0%) → circle(150%)
Variables: --overlay-bg, aspect-ratio 4/3 on cards

Advanced & Unique

Ken Burns (scale+translate), grayscale→color (filter), RGB glitch (keyframes+drop-shadow), shine sweep (pseudo-element), blur focus, blinds (scaleY on spans), corner peel (border trick), 3D tilt (JS), split diagonal (clip-path), morph blob (ellipse clip-path).

Ken Burns – scale(1.2) translate(5%, 5%)
Glitch – @keyframes glitch-anim with drop-shadow RGB
Blinds – .blinds span with scaleY(0)→1 and staggered delay
3D Tilt – tilt.js sets transform from mousemove

Spotlight & Magnify

Spotlight: pro-effects.js updates radial-gradient on .spotlight-mask from mousemove (cursor-follow reveal). Magnify: pro-effects.js sets scale(1.8) and transform-origin at cursor for zoom-at-point.

Spotlight – mousemove → mask.style.background radial-gradient at x% y%
Magnify – transform-origin at cursor, scale(1.8) on hover
data-spotlight and data-magnify on .effect-card
tilt.js: data-tilt → .tilt-inner rotateX/Y from cursor

What You Get

Static HTML/CSS/JS: image-hover-effects/ folder with index.html, css/styles.css, js/tilt.js, js/pro-effects.js, README.md, LICENSE (MIT). No build step. Open index.html or serve folder.

Complete source – image-hover-effects/ with HTML, CSS, JS
No build step – open index.html or static server
README.md, LICENSE (MIT) included
Technologies: HTML5, CSS3, Vanilla JS. © 2026 Molla Samser (RSK World).

Usage

Open index.html. Scroll to see 7 sections: Zoom Effects, Overlay Animations, Transform Effects, Reveal Animations, Advanced & Unique, Pro Effects, Extra Effects. 38 effect cards with hover; 3D Tilt, Spotlight, Magnify need JS.

image-hover-effects/index.html – single demo page
tilt.js on [data-tilt], pro-effects.js on [data-spotlight] and [data-magnify]
Accessibility: skip-link, semantic HTML, responsive grid
Author: Molla Samser | rskworld.in

Project Features

38 effects: zoom (2), overlay (3), transform (3), reveal (3), advanced (10), pro (10), extra (6). Pure CSS for most; 3D Tilt, Spotlight, Magnify use minimal JS (tilt.js, pro-effects.js).

Zoom & Overlay – scale, fade, slide, zoom+overlay
Transform & Reveal – rotate, flip, skew, clip-path reveals
Advanced – Ken Burns, glitch, shine, blinds, peel, tilt, split, blob
Pro – squares pop, sepia, ripple, flip X, stack, spotlight, magnify, grain, wipe