HoverMenu

Img preview menu & hover animation

An interactive menu where hovering each item triggers a unique image sliding in from off-screen with a rotation animation. The previous image stays as the background while the new image animates on top — creating a cinematic layered reveal. Built for portfolios, creative agencies, and fashion sites that need navigation as visually striking as the content itself. Features Hover any menu item to trigger a unique image animation Images slide in from bottom-left with rotation effect Previous image becomes background for a layered depth effect Smooth 1.25s animation with custom cubic-bezier easing Default background image shown before any hover Configurable image rotation angle (−45° to 45°) Separate text and hover text color controls Full typography controls — size, weight, spacing, line height Adjustable gap between menu items Configurable component padding Mobile responsive — vertical layout under 768px Reduced font size, gap and padding on mobile automatically No dependencies Property Controls Content Menu Items Default Image Typography Colors Layout Image Animation Details Initial state — image at 125% top, −50% left, rotated −30° Final state — image at 0% top, 0% left, no rotation Easing — cubic-bezier 0.22, 1, 0.36, 1 for smooth deceleration AnimatePresence with wait mode for clean layered transitions startTransition for React 18 performance Use Cases Portfolio navigation · Creative agency websites · Fashion and photography showcases · Product category browsers · Interactive landing pages · Editorial navigation · Luxury brand sites SEO Keywords framer hover menu · framer image menu · framer interactive menu · framer navigation component · framer menu animation · framer hover image · framer creative menu · framer portfolio navigation · framer menu reveal · framer animated menu · framer image navigation · framer agency component · framer hover animation · framer code component · framer visual menu

Img preview menu & hover animation