5d:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rc641binzbjp.js","/creators-assets/_next/static/immutable/chunks/12ci1vsd8nj4u.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/2ply_q-h6u_2z.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/1pb7yncyfm9fe.js","/creators-assets/_next/static/immutable/chunks/1j6jg0y72xk13.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/26nhnsanh2piz.js","/creators-assets/_next/static/immutable/chunks/03itqfxm4gmj8.js","/creators-assets/_next/static/immutable/chunks/114fkj16mhe97.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/16inv17cv83xq.js","/creators-assets/_next/static/immutable/chunks/2760bhhttj0zo.js","/creators-assets/_next/static/immutable/chunks/3_z6gb0g1nigd.js","/creators-assets/_next/static/immutable/chunks/3vlbhrh3-zofo.js","/creators-assets/_next/static/immutable/chunks/120bipr4k16wv.js","/creators-assets/_next/static/immutable/chunks/3ea2l_ol8wqqa.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/1zr4ew02k6y_l.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/08ajsjh8ypdt2.js","/creators-assets/_next/static/immutable/chunks/1ddgh6mv1wg4x.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/3t6k2_m2gc3-k.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0w6oa8_ba59u4.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/3c3kl-ixsd844.js"],"PostDetailCard"] 5e:T5c7,

Turn a plain list of categories into an interactive showcase. Visitors hover, tap or tab through oversized type while a preview card swaps instantly to match, with its own image, title, description and linked button.

Built for storefronts, agency service menus, portfolio category pages, and any section where a few key offerings deserve more than a bulleted list.

INCLUDED

• Four preview cards, each with its own image, title, description and link

• Oversized list with an animated divider that expands beneath the active row

• Sparkle indicator marking the current selection

• Sticky card that follows the list while it scrolls

• CTA row with a rotating plus icon and its own link

CUSTOMISATION

Every colour, font, size, padding and margin is exposed in the properties panel. Divider speed, easing and expand direction are adjustable. Card width, image height, corner radius and button styling are all editable without touching code.

RESPONSIVE

The layout adapts at configurable tablet and mobile breakpoints using CSS container queries, so it responds to the width of the section it sits in rather than the browser window. It lays out correctly inside any column, grid or nested container.

SETUP

Drop it on the canvas and set the width to fill. Replace the four images and their text, then add links to the card button and the CTA. The component is designed around four categories.

5a:[["$","$L5d",null,{"post":{"id":"019fea44-e0d3-73d8-93a6-263f2adb9a4c","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"7e63332c-77d2-4e00-a6ca-d9c98c3d7dcf","name":"FeCommerce","slug":"fecommerce","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1522163/avatar-O3mD0A25QB3hEFuyWMXPGD4iqS1Dlf.jpg","badges":["available","studio"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"kYasp7p809L5z0JRfLFM","resolved":true,"title":"Fe Hover Preview","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Turn a plain list of categories into an interactive showcase. Visitors hover, tap or tab through oversized type while a preview card swaps instantly to match, with its own image, title, description and linked button."}]},{"type":"paragraph","content":[{"type":"text","text":"Built for storefronts, agency service menus, portfolio category pages, and any section where a few key offerings deserve more than a bulleted list."}]},{"type":"paragraph","content":[{"type":"text","text":"INCLUDED"}]},{"type":"paragraph","content":[{"type":"text","text":"• Four preview cards, each with its own image, title, description and link"}]},{"type":"paragraph","content":[{"type":"text","text":"• Oversized list with an animated divider that expands beneath the active row"}]},{"type":"paragraph","content":[{"type":"text","text":"• Sparkle indicator marking the current selection"}]},{"type":"paragraph","content":[{"type":"text","text":"• Sticky card that follows the list while it scrolls"}]},{"type":"paragraph","content":[{"type":"text","text":"• CTA row with a rotating plus icon and its own link"}]},{"type":"paragraph","content":[{"type":"text","text":"CUSTOMISATION"}]},{"type":"paragraph","content":[{"type":"text","text":"Every colour, font, size, padding and margin is exposed in the properties panel. Divider speed, easing and expand direction are adjustable. Card width, image height, corner radius and button styling are all editable without touching code."}]},{"type":"paragraph","content":[{"type":"text","text":"RESPONSIVE"}]},{"type":"paragraph","content":[{"type":"text","text":"The layout adapts at configurable tablet and mobile breakpoints using CSS container queries, so it responds to the width of the section it sits in rather than the browser window. It lays out correctly inside any column, grid or nested container."}]},{"type":"paragraph","content":[{"type":"text","text":"SETUP"}]},{"type":"paragraph","content":[{"type":"text","text":"Drop it on the canvas and set the width to fill. Replace the four images and their text, then add links to the card button and the CTA. The component is designed around four categories."}]}]},"introduction":"An interactive category list that","slug":"fe-hover-preview","author":{"framerUserId":"7e63332c-77d2-4e00-a6ca-d9c98c3d7dcf","name":"FeCommerce","slug":"fecommerce","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1522163/avatar-O3mD0A25QB3hEFuyWMXPGD4iqS1Dlf.jpg","badges":["available","studio"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7e63332c-77d2-4e00-a6ca-d9c98c3d7dcf/019fea44-88a8-701c-a8e0-aa2b2bdb0464.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-08-10T06:03:29.878Z","updatedAt":"2026-08-10T06:20:22.457Z","publishedAt":"2026-08-10T06:03:29.875Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Fe-Hover-Preview-List-k0Cb5b.js@CYf2f51Z2KmDRwAfUgTG","previewUrl":"https://youthful-quicker-595984.framer.app/preview","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"CYf2f51Z2KmDRwAfUgTG","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":19,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-10T06:03:30.387Z","updatedAt":"2026-08-10T06:03:30.387Z","reported":false}}],"$L5f"]

Suggested for you