Hover-Reveal Menu — Image-on-Word Portfolio Variant

What it does

• Vertical name list — a column of confident project or section names sits as the page's main navigation
• Hover-driven image swap — as the visitor moves over each name, the matching hero image fades into view on the other side
• Smooth crossfades — image transitions are paced gently so the page feels editorial, not flickery
• Active state on the label — the hovered name highlights or shifts to reinforce the connection between word and image
• Calm default state — when nothing is hovered, the page rests on a default hero that sets the brand tone

Best use cases

• Interior designers and architects — project rooms or signature spaces from a single nav
• Photographers — series or shoots where each one has a distinct visual world
• Studios and agencies — service categories or client work shown as moody preview swaps
• Course creators — course or program list where each item has its own brand world
• Authors and creators — book series, collections, or chapters revealed by hover

What you can change with your DNA

When you run this through the remix skill, your CCOS DNA — brand, voice, audience — drives these decisions automatically:

• Colors — page background, label text colors (default and active), and accent for the active state. Swap for any brand register from gallery-clean to moody-cinematic.
• Fonts — one display role for the project names (the dominant typographic moment) and a clean sans for any supporting copy
• Copy — section or project names (typically 4–8 entries), short page intro or brand line, and any supporting nav copy
• Images — one signature image per label (this is the largest visual decision), plus a default hero image
• Behavior — control crossfade speed, default state behavior, and whether labels click through to detail pages