---
title: "HoverMenu — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Hamim Reza · Navigation. Img preview menu & hover animation"
canonical: "https://framer.elliotli.dev/component/hovermenu"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/HoverMenu

# HoverMenu

Img preview menu & hover animation

[View on Framer](https://framer.com/marketplace/components/hovermenu/?via=elliot-li)

![HoverMenu preview image 1](https://framer.elliotli.dev/og/component/hovermenu/2f9c36f6d51d55e5/1600x1200.jpg)

## Summary

Img preview menu & hover animation

## Description

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

## Rank history [How rankings work →](/terms#rankings)

-   All · #4090

## Details

- **Author**: Hamim Reza
- **Price**: $10.00
- **Published**: 2026-03-27
- **Updated**: 2026-07-09
- **Added**: 2026-03-14
- **Categories**: Navigation

## More like this

-   [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu
-   [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation
-   [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects
-   [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation