Skip to content
Get packs

Reveal Hover Effect

Build cursor-following spotlight reveals that show a second aligned image under the pointer

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
5 files

What it does

When installed, the agent can build web components where a base image (for example a desaturated or line-drawing version) is covered by an aligned second image, and only a soft circular spotlight around the mouse pointer reveals the second image. The skill supplies the markup, CSS mask, and eased JavaScript pointer tracking, plus guidance on matching image sizes and accessibility. It is a specialised front-end recipe rather than a general tool.

Great for

  • Front-end developers adding hover-to-colour or before-and-after effects to product or hero images
  • Designers who want a spotlight or x-ray style interaction built in code without reinventing the mask and easing logic

Skip it if

  • Sites that need touch-friendly comparison sliders: the overlay is hidden on touch and coarse-pointer devices, so the effect does nothing there.
  • Pages where the second image carries unique information that is not shown elsewhere, unless visible labels or an accessible description are added, since the overlay is marked decorative by default.

Try asking

  • “Build a hover reveal where a black-and-white product photo turns to colour around the cursor”
  • “Create a before-and-after hero image that shows the x-ray version under the mouse”
  • “Add a spotlight effect to my product detail page using my two aligned images”
Step-by-step guide: how to use Reveal Hover EffectInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 5 original files, the MIT licence and an attribution note.

    reveal-hover-effect.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip reveal-hover-effect.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip reveal-hover-effect.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Prepare both images at the same width, height and crop before asking for the component, since any mismatch shows inside the spotlight.
  • Specify the spotlight radius and whether the effect is decorative or carries meaning, so the agent sets the right alt text and labels.
  • Test the effect with reduced-motion and touch devices, since the skill disables motion and hides the overlay in those cases.

What's inside

  • agents/openai.yaml
  • demo/index.html
  • demo/PROMPT.md
  • REFERENCES.md
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.