---
title: "Bento Hover Expand — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Trirong Phasukyued · Sections. A bento grid hovered tile grows"
canonical: "https://framer.elliotli.dev/component/bento-hover-expand"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Bento Hover Expand

# Bento Hover Expand

A bento grid hovered tile grows

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

![Bento Hover Expand preview image 1](https://framer.elliotli.dev/og/component/bento-hover-expand/1674350910d6af4d/1600x1200.jpg)

## Summary

A bento grid hovered tile grows

## Description

Turn a flat feature grid into a living one. Hover (or tap) any tile and it smoothly **grows and reveals a second layer** — description, tag, and an optional link — while its neighbours shrink to make room. The trick: it redistributes the grid's track weights instead of resizing one cell, so the \*\*outer section never changes size\*\* — zero layout shift, nothing on the page jumps. Edit tiles like a list (icon or image, title, details, tag, accent, link), tune the columns, gap, radius, and how far tiles expand, and it just works on every screen — collapsing to a single column on phones. Self-contained: nothing to host, no packages to add.

**Features:**

-   Hover-to-expand tiles that reveal a second content layer (details + tag + link)
    
-   **Constant-size grid reflow** — track-weight redistribution means no layout shift
    
-   Works by **mouse hover, touch tap, and keyboard** (focusable, `aria-expanded`, Enter/Space) — accessible and mobile-safe
    
-   Per-tile **icon (emoji), image, or color fill** with an automatic legibility gradient
    
-   **Per-tile fills with separate normal + hover states** (solid / gradient / animated flowing gradient) that cross-fade — e.g. plain at rest, vivid background on hover
    
-   **Two image layers per tile**, each with Cover/Contain fit and hover FX (Zoom / Pan / Tilt / Parallax / Rise / Reveal) — or Advanced manual transforms (x, y, scale, rotate, opacity)
    
-   **Configurable border** (width + color, or off)
    
-   **Two content modes:** author tiles in the panel, or drop your own frames/components into **Slots** and have the bento lay them out + animate them (bring-your-own content)
    
-   Fully responsive — auto-reduces columns to a single column on phones (no h-scroll)
    
-   Static-render poster for the Framer canvas/export (first tile pre-expanded)
    
-   Self-contained — only `framer` + `react`, no libraries, nothing to install
    
-   13 property controls + per-tile editor — designed for non-coders
    

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

-   All · #7914

## Details

- **Author**: Trirong Phasukyued
- **Price**: $10.00
- **Published**: 2026-06-23
- **Updated**: 2026-06-23
- **Added**: 2026-06-23
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes