Overview
Hover Reveal Nav is a full-screen navigation overlay component built for creative portfolios, music artists, agencies, and editorial websites. The layout splits the screen into two — navigation links on the left, and a large full-height image panel on the right that dynamically changes based on which link you hover over. Each link has its own dedicated image, creating a rich, editorial browsing experience that feels cinematic and intentional.
Interaction & Animation
The core interaction is a smooth hover-reveal effect. When a user hovers over any navigation link, the corresponding section image transitions into view on the right panel with a fluid animation. The active hovered link switches to an elegant italic script style in red, while all other links remain in bold uppercase — creating a clear and beautiful visual hierarchy. On mobile, since hover isn't supported, the images cycle automatically, keeping the experience equally polished across all devices.
Layout & Structure
Full-screen overlay with a logo in the top-left and a CLOSE button in the top-right
Left panel — large bold uppercase navigation links stacked vertically
Right panel — full-height image that updates on each hover
Active link state — switches to a red italic script typeface
Clean dark background that keeps the imagery and typography as the focal point
What's Included
Desktop variant with hover-reveal image interaction
Mobile variant with automatic image cycling
5 pre-built navigation links — fully editable (text, URL, style)
5 corresponding hover images — swap with your own in seconds
Logo slot — replace with your own brand mark
Full documentation included inside the canvas
No code required
Built For
Music artists · Creative portfolios · Fashion brands · Agencies · Editorial sites
Support
Have questions or need help customizing?
@jaaliwaale on Instagram
Jaaliwaale
