Bento Hover Expand

A bento grid hovered tile grows

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

A bento grid hovered tile grows