Hover Curtain
The mask slides in from the left while the image slides in from the right, so the frame reads as a curtain rather than a stretch.
HorizonX Pointer PhysicsTool collection
CSS Hover Effects & Animations
Hover effects CSS inspiration and GSAP image reveals, including curtains, wipes, fans, card lighting, button treatments and expanding search. Use hover to reveal a secondary detail or preview a destination. Match an image reveal to editorial links and keep functional controls more restrained than decorative showcases.
- 29 components
- Edit live in the browser
- Export HTML, Svelte or React
- Read the guide
HorizonX Pointer Physics
What is inside
Hover effects CSS inspiration and GSAP image reveals, including curtains, wipes, fans, card lighting, button treatments and expanding search.
When to use it
Use hover to reveal a secondary detail or preview a destination. Match an image reveal to editorial links and keep functional controls more restrained than decorative showcases.
Customize and integrate
Replace images and labels first, then tune the visual response around the actual target size. Inspect each tool: the reveal series is tagged GSAP, not CSS-only.
Before publishing
Provide equivalent focus or tap behavior and keep essential information visible without hover. Test dense menus on touch screens and avoid surprise movement beneath the pointer.
Are all hover effects made with CSS?
No. The collection pairs CSS-tagged controls with GSAP image reveals and a Canvas pixel card. Check the renderer before choosing a technique.
Do hover effects work on phones?
Phones do not provide the same persistent hover interaction. Provide a tap or always-visible alternative for any information revealed on hover.
What should stay visible without hover?
The link label, primary content and essential instructions should remain available. Treat hover as an enhancement, not the only path to understanding.
From the blog
Guides
Keep exploring
Related collections
Tune it live, then export the code
Every interactive tool on HorizonX opens in an editor you can adjust in the browser before you export it.