---
title: "Hover Accordion — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Ameva · Accordions. Hover to expand media galleries."
canonical: "https://framer.elliotli.dev/component/hover-accordion"
---

[Home](/)/[Components](/components)/[Accordions](/components/category/accordions)/Hover Accordion

# Hover Accordion

Hover to expand media galleries.

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

![Hover Accordion preview image 1](https://framer.elliotli.dev/og/component/hover-accordion/f1b90fcda33c056f/1600x1200.jpg)

## Summary

Hover to expand media galleries.

## Description

Build a premium, highly engaging visual experience with a fluid hover-expand accordion. Perfectly handles images, auto-playing videos, and custom typography to showcase your best content with smooth, eye-catching motion.

**Features**

-   Fluid hover-triggered expansion and collapse
    
-   Seamless image and 4K video media support
    
-   Smart auto-play and pause logic for hovered videos
    
-   Dark gradient overlay for optimal text legibility
    
-   Smooth, premium motion physics and easing
    
-   Global typography control for seamless branding
    
-   Custom animated tags, titles, descriptions, and CTA buttons
    
-   Highly optimized for responsive Framer layouts
    
-   Zero-code setup with dynamic property controls
    
-   Clean visual architecture for premium UI
    

**Customization Options**

-   Media type (Image or MP4/WebM Video)
    
-   Global typography styling (Font, Size, Weight)
    
-   Accordion gap and layout spacing
    
-   Corner radius and clipping
    
-   Expanded and collapsed flex sizing ratios
    
-   Animation transition speed and smoothness
    
-   Panel titles and multi-line descriptions
    
-   Custom top-right tag labels and CTA text
    

**How to Use**

-   Drop the component onto your Framer canvas
    
-   Add or remove panels via the property controls on the right
    
-   Upload high-quality images or immersive video files
    
-   Tweak the transition speed and flex sizes to fit your layout
    
-   Adjust the typography to perfectly match your brand guidelines
    
-   Publish to deliver a highly interactive, premium showcase
    

**Use Cases**

-   Interactive portfolio galleries
    
-   Modern SaaS feature highlights
    
-   Creative agency showcases
    
-   Video product demonstrations
    
-   Dynamic landing page sections
    
-   Premium real estate listings
    
-   Cinematic photography sliders
    
-   High-converting media blocks
    
-   Interactive case study menus
    
-   Engaging e-commerce displays
    

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

-   All · #1222

## Details

- **Author**: Ameva
- **Price**: $5.00
- **Published**: 2026-08-09
- **Updated**: 2026-08-22
- **Added**: 2026-08-09
- **Categories**: Accordions

## More like this

-   [Fold Rows](/component/fold-rows) — H SHIFT WORKS · Free — Accordion for FAQs and services
-   [FaqX Faq Accordion](/component/faqx-faq-accordion) — Themomarket · $8 — Accordion FAQ Section
-   [FAQ - Minimal](/component/faq-minimal) — VectorFlow Studio · $3 — Interactive dark mode FAQ stack
-   [FAQ Accordion Search](/component/faq-accordion-search) — Russet Supply · $5 — Searchable FAQ accordion with categories