5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5f:I[539959,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"CommentSection"] 5e:T6fb,

Spotlight - Hover Gallery turns a simple set of images into a dynamic, layered collage. As you move your cursor across the gallery, each card smoothly jumps to the front, creating a cinematic “spotlight” effect without any custom code.

Use it for hero sections, product showcases, campaign visuals or portfolio highlights - anywhere you want your imagery to carry the story.

Key features

- Hover-to-focus animation - every image moves to the front on hover with a smooth spring transition.

- Layered collage layout - overlapping cards with curated offsets for depth and visual tension.

- Fully editable cards - replace each default image and label from the right panel, no CMS required.

- Resizable & responsive-friendly - designed to sit inside your own layout and adapt to different section sizes.

- Multiple variants included - prebuilt states for focusing different images so you don’t have to wire the interactions from scratch.

Best use cases

- Visual portfolios (photography, creative studios, case studies)

- Product or campaign highlights on landing pages

- Editorial hero sections and feature blocks

- Moodboards and inspiration collages

How to use

1. Drop Hover Gallery into your canvas.

2. Resize the component to match your section (hero, feature block, etc.).

3. Select each card and swap the default images for your own assets.

4. Preview the page and hover over the gallery - each image will jump into the spotlight as you move your cursor.

That’s it - you get an interactive, high-impact gallery with zero custom code.

5a:[["$","$L5d",null,{"post":{"id":"019ada75-b976-774a-908e-06d4099c3b5c","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"954acd83-ca10-4d69-b86d-786565b70335","name":"Devique Studio","slug":"devique-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1286520/avatar-jeNj0DYOBYMfuAUM5F5GAcDJx3C0IC.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"LLnXxNAiC8vvISYacK0K","resolved":true,"title":"Hover Gallery","body":"$5e","bodyJson":null,"introduction":"Dynamic hover image gallery","slug":"hover-gallery","author":{"framerUserId":"954acd83-ca10-4d69-b86d-786565b70335","name":"Devique Studio","slug":"devique-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1286520/avatar-jeNj0DYOBYMfuAUM5F5GAcDJx3C0IC.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/LLnXxNAiC8vvISYacK0K/hover-gallery-FaK4BJ9MRUZffuRCR82sybPXEgSyS3","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-11-20T22:15:57.304Z","updatedAt":"2026-02-27T00:17:38.276Z","publishedAt":"2025-12-01T15:08:59.638Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/Spotlight-Hover-Gallery-lTtA.js@v0COlEronYHWwuGnQc4h","previewUrl":"https://trustworthy-friday-528508.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"v0COlEronYHWwuGnQc4h","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":64,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-12-01T15:08:59.638Z","updatedAt":"2025-12-01T15:08:59.638Z","reported":false}}],["$","$L5f",null,{"target":{"kind":"post","postId":"019ada75-b976-774a-908e-06d4099c3b5c"},"postId":"019ada75-b976-774a-908e-06d4099c3b5c","postAuthor":"$5a:0:props:post:author","targetCommentId":"$undefined"}]]

Suggested for you