5c:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/3gx96u50v9idb.js","/creators-assets/_next/static/immutable/chunks/125_ce2ese0y_.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/069_m7850i8jf.js","/creators-assets/_next/static/immutable/chunks/03586ab1rea-b.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0-lv0573a1cyl.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/24gcuxpvxd8dy.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3vd9_7_mqx0kl.js","/creators-assets/_next/static/immutable/chunks/3l37d07td4kzk.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3nw4q_evu8ge1.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2qsfz_74auu2_.js","/creators-assets/_next/static/immutable/chunks/1xkjm3oyldl_r.js","/creators-assets/_next/static/immutable/chunks/16d5vpfsnfybw.js","/creators-assets/_next/static/immutable/chunks/3yfgkb3cck8zt.js","/creators-assets/_next/static/immutable/chunks/0rfcd366io6r9.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/3kyaj4hrugjs0.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2ryuxt_mk774w.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/0pc9t50m5x90i.js","/creators-assets/_next/static/immutable/chunks/2ee50z0bknh40.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/0e-wwv74y78f7.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js"],"PostDetailCard"] 5d:T9c1,

Editorial Hover Grid is an interactive editorial image grid for Framer that transforms a clean visual layout into a rich content experience. Each image can reveal a beautifully styled information panel with a label, title, description, custom colors, and an optional link.

✦ Key Features

Interactive Hover Reveal - Hover over an image to reveal its editorial content.
Image Gallery - Build visual collections using uploaded images or image URLs.
Editorial Content - Add a custom label, title, and description to every card.
Custom Card Links - Connect individual cards to pages, projects, or external destinations.
Staggered Text Reveal - Content smoothly appears in sequence for a polished interaction.
Flexible Grid - Choose a fixed number of cards per row or use an automatically adapting layout.
Custom Panel Colors - Give every reveal panel its own background and text colors.
Adjustable Image Layout - Control image size, aspect ratio, inset, corner radius, and reveal scaling.
Custom Typography - Independently style labels, titles, and body copy.
Responsive Typography - Text automatically scales with the available card size.

✦ What You Can Create

Editorial image galleries
Photography portfolios
Art and exhibition showcases
Creative project archives
Magazine-inspired layouts
Case study collections
Design studio portfolios
Museum and cultural websites
Visual storytelling sections
Interactive project grids

✦ Turn Every Image Into a Story

Editorial Hover Grid gives every image a second layer of information. Visitors can explore the visuals first, then reveal the story behind each piece through smooth interaction, bold color panels, and carefully structured typography. Keywords: Editorial Hover Grid, Hover Grid, Editorial Gallery, Hover Reveal, Interactive Grid, Image Grid, Framer Gallery, Editorial Layout, Portfolio Grid, Image Reveal, Hover Gallery, Creative Portfolio, Photography Gallery, Interactive Gallery.

59:[["$","$L5c",null,{"post":{"id":"01a09ff6-f8ec-71ed-a81d-a3bd32990fd0","title":null,"body":"

Editorial Hover Grid Component

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Editorial Hover Grid Component "}]}]},"author":{"framerUserId":"93e0445d-da1b-434f-be79-797c7c983df6","name":"Axis Supply","slug":"axissupply","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/93e0445d-da1b-434f-be79-797c7c983df6/x7b91rcg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"cm5g8wlPlpf6gsvlUHir","resolved":true,"title":"Editorial Hover Grid","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Editorial Hover Grid","marks":[{"type":"bold"}]},{"type":"text","text":" is an interactive editorial image grid for Framer that transforms a clean visual layout into a rich content experience. Each image can reveal a beautifully styled information panel with a label, title, description, custom colors, and an optional link."}]},{"type":"customHeading","content":[{"type":"text","text":"✦ Key Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive Hover Reveal","marks":[{"type":"bold"}]},{"type":"text","text":" - Hover over an image to reveal its editorial content."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image Gallery","marks":[{"type":"bold"}]},{"type":"text","text":" - Build visual collections using uploaded images or image URLs."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Editorial Content","marks":[{"type":"bold"}]},{"type":"text","text":" - Add a custom label, title, and description to every card."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom Card Links","marks":[{"type":"bold"}]},{"type":"text","text":" - Connect individual cards to pages, projects, or external destinations."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Staggered Text Reveal","marks":[{"type":"bold"}]},{"type":"text","text":" - Content smoothly appears in sequence for a polished interaction."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Flexible Grid","marks":[{"type":"bold"}]},{"type":"text","text":" - Choose a fixed number of cards per row or use an automatically adapting layout."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom Panel Colors","marks":[{"type":"bold"}]},{"type":"text","text":" - Give every reveal panel its own background and text colors."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable Image Layout","marks":[{"type":"bold"}]},{"type":"text","text":" - Control image size, aspect ratio, inset, corner radius, and reveal scaling."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom Typography","marks":[{"type":"bold"}]},{"type":"text","text":" - Independently style labels, titles, and body copy."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive Typography","marks":[{"type":"bold"}]},{"type":"text","text":" - Text automatically scales with the available card size."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"✦ What You Can Create"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Editorial image galleries"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Photography portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Art and exhibition showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative project archives"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Magazine-inspired layouts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Case study collections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Design studio portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Museum and cultural websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Visual storytelling sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive project grids"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"✦ Turn Every Image Into a Story"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Editorial Hover Grid gives every image a second layer of information. Visitors can explore the visuals first, then reveal the story behind each piece through smooth interaction, bold color panels, and carefully structured typography. Keywords"},{"type":"text","text":":","marks":[{"type":"bold"}]},{"type":"text","text":" Editorial Hover Grid, Hover Grid, Editorial Gallery, Hover Reveal, Interactive Grid, Image Grid, Framer Gallery, Editorial Layout, Portfolio Grid, Image Reveal, Hover Gallery, Creative Portfolio, Photography Gallery, Interactive Gallery."}]}]},"introduction":"Interactive Editorial Hover Card","slug":"editorial-hover-grid","author":{"framerUserId":"93e0445d-da1b-434f-be79-797c7c983df6","name":"Axis Supply","slug":"axissupply","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/93e0445d-da1b-434f-be79-797c7c983df6/x7b91rcg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/93e0445d-da1b-434f-be79-797c7c983df6/01a09ff6-71a9-773b-9c30-9edc38144cb1.png","metadata":{"tint":{"h":0,"s":0,"l":58},"width":3200,"height":2400}}],"post":null,"createdAt":"2026-09-14T12:49:17.470Z","updatedAt":"2026-09-14T12:52:39.009Z","publishedAt":"2026-09-14T12:49:17.462Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Passepartoutgrid-GkKfKl.js@Eyfuj6zfKfudbRW4thNr","previewUrl":"https://editorialhovergrid.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"3a855006-6097-4489-b33b-8024cb26633e","name":"Interactions","slug":"interactions"}],"lastSaveId":"Eyfuj6zfKfudbRW4thNr","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-14T12:49:18.060Z","updatedAt":"2026-09-14T12:49:18.060Z","reported":false}}],"$L5e"]

Suggested for you