skills.rest
MengTo
MengToCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

reveal-hover-effect

Implements cursor-following radial CSS mask reveals that expose a second aligned image on hover.

5.7k|685|Updated Feb 3, 2026
Search Tags:#hover effect#requestAnimationFrame#Web design#radial-gradient#css mask#pointer tracking#image reveal
One-click install
npx skills add https://github.com/MengTo/Skills --skill reveal-hover-effect
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reveal-hover-effect
Source: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/reveal-hover-effect
Command: npx skills add https://github.com/MengTo/Skills --skill reveal-hover-effect

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building a cursor-following spotlight that reveals an alternate image treatment requires careful coordination of CSS masks, pointer tracking, easing, and cleanup; this Skill provides a complete, tested implementation pattern so the effect works correctly across browsers, pointers, and motion preferences.

Core Features & Use Cases

  • Radial Mask Reveal: Stacks two pixel-aligned images and reveals the overlay through a feathered radial-gradient CSS mask driven by custom properties.
  • Eased Pointer Tracking: Uses a single requestAnimationFrame loop with position and radius easing that starts under the pointer, collapses on exit or window blur, and stops when idle.
  • Accessibility and Fallbacks: Handles coarse pointers with a static base image or toggle control, respects prefers-reduced-motion, and keeps the native cursor visible.
  • Use Case: Build an editorial hero where a plaster product photo reveals an opal-glass version under the visitor's cursor, with a "Reveal material" button for touch and keyboard users.

Quick Start

Use the reveal-hover-effect skill to build a cursor-following spotlight that reveals a second aligned image through a soft radial mask.

Frequently Asked Questions about reveal-hover-effect

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a cursor-following image reveal effect with CSS?▼

Stack two identically sized images, apply a radial-gradient mask-image to the overlay, and update CSS custom properties for mask position and radius from a requestAnimationFrame loop that eases toward the pointer coordinates.

How to reveal a second image on hover using CSS mask-image?▼

Use mask-image with a radial-gradient whose stops hold full opacity through 40% of the radius and feather to transparent at 100%. Track pointermove events, convert clientX/clientY with getBoundingClientRect, and ease the mask center toward the pointer.

Does CSS mask-image work in Safari?▼

Yes, but Safari requires the -webkit-mask-image vendor prefix alongside the standard mask-image property. Include both declarations plus mask-repeat: no-repeat, and test the feathered gradient stops in WebKit to confirm identical rendering.

Why does my hover spotlight drift away from the cursor after scrolling?▼

The mask coordinates were computed from page coordinates instead of element-local ones. Recalculate with getBoundingClientRect on scroll and resize events, and update the target position from the stored clientX and clientY values.

How do I handle touch devices for a hover reveal effect?▼

Detect coarse pointers with the (hover: none) or (pointer: coarse) media query and hide the masked overlay, showing the static base image. If the reveal carries meaningful information, add an explicit toggle button for touch and keyboard users.

When should I use a CSS mask instead of canvas for a reveal effect?▼

Prefer CSS masks when the reveal is a radial gradient over a static image, since they avoid per-frame canvas.toDataURL allocations and simplify cleanup. Canvas is only needed for pixel-level manipulation or dynamic generated imagery.

Related Skills

Explore More Design & Creative Skills→
openaiopenai
5.3k

adobe-create-social-variations

Resize and crop images and videos into platform-ready social media assets using Adobe Creative Cloud tools.

Official
Advanced
inference-shinference-sh
688

landing-page-design

Optimize landing page layout, hero sections, and CTA psychology for conversion.

Official
Intermediate
nachopalmerinachopalmeri

css-animations

Provide ready-to-use CSS 2D animation patterns for websites.

Community
Intermediate
rakibulismrakibulism
2

webgl-creative-coder

Build GPU-driven WebGL visuals and shader effects for Three.js and React Three Fiber.

Community
Advanced