5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3jpuro209qqra.js","/creators-assets/_next/static/immutable/chunks/2qlox892e2j_q.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/07e2f_v4-u-we.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3orcs6a8eyfvz.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/120zfy8hqrcwf.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/2c_4he4mvu2r0.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/3q7g04e77g4lf.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/0lmnldnlzsgok.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/0z2hzm-7v_g2c.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2_qutx8yar-up.js","/creators-assets/_next/static/immutable/chunks/0p4vy6mn-x9zs.js"],"PostDetailCard"] 5d:Tcfe,

An interactive image zoom component that reveals a magnified pop-out window on hover. Fully customizable with smooth motion, zoom levels, border styling, and shadow controls. Perfect for product previews, galleries, and detailed image inspections.

The Image Zoom Pop-out is a high-quality interactive image component for Framer that displays a smooth, magnified zoom window when users hover over an image. Designed for product-focused websites, portfolios, and detail-heavy layouts, it allows visitors to explore images more closely without leaving the page.

You can fully control the zoom strength, popout size, border styling, corner radius, shadow, and image fit mode. The zoom window dynamically follows the cursor and adapts intelligently near the edges for a seamless experience. Whether you're showcasing products, artwork, or detailed visuals, this component adds a premium, interactive touch to your designs.

Key Features

Interactive Hover Zoom — Displays a magnified pop-out view when users hover over the image.

Adjustable Zoom Level — Control how powerful the zoom effect feels.

Custom Pop-out Size — Set the exact size of the zoom window.

Dynamic Cursor Tracking — The zoom follows the user’s cursor in real time.

Image Fit Controls — Choose between cover, contain, fill, or none.

Border & Radius Control — Fully customizable border color, width, and rounded corners.

Optional Drop Shadow — Add depth with a realistic shadow effect.

Smooth Motion Animation — Clean scale and fade animation on hover.

Edge-Aware Positioning — Smart placement near edges for better visibility.

Fully Responsive — Works in any fixed layout and adapts cleanly to design frames.

Usage Ideas

Product detail pages
E-commerce image previews
App UI mockups
Portfolio image inspections
Fashion & lifestyle product showcases
High-detail digital artwork galleries

Refund Policy

All sales are final due to the nature of digital products. Please review all details before purchasing.

Questions & Support

Free lifetime updates & email support.

Questions? Reach out via email integrystudio@gmail.com or on LinkedIn.

Setting Up

Need help setting up your website or integrating this component?

Reach out, and we’ll help get it running perfectly in your Framer project.

Demo

59:[["$","$L5c",null,{"post":{"id":"019b0e6f-41b6-7716-ab04-48223b4076cb","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"189902f2-577b-409b-a96e-d63b629fc3b4","name":"Integry","slug":"integrystudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/96437/avatar-MfTznqKeqttkCeqaHZ3PNQowNQRZ0W.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"F06XK6Oj5HZE1IyCOORx","resolved":true,"title":"Image Zoom Pop-out","body":"$5d","bodyJson":null,"introduction":"","slug":"image-zoom-pop-out","author":{"framerUserId":"189902f2-577b-409b-a96e-d63b629fc3b4","name":"Integry","slug":"integrystudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/96437/avatar-MfTznqKeqttkCeqaHZ3PNQowNQRZ0W.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/F06XK6Oj5HZE1IyCOORx/image-zoom-pop-out-70pvdV95YsXkz4rM9tYTXYTy3nLut5"}],"post":null,"createdAt":"2025-11-27T18:14:17.575Z","updatedAt":"2025-12-11T13:41:00.496Z","publishedAt":"2025-12-11T17:22:10.998Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://imagezoompopout.framer.website/","price":"8","paymentUrl":"https://integry.lemonsqueezy.com/buy/4becf3d7-6b55-4969-9a35-38db08872b25","workshop":false,"categories":[{"id":"3a855006-6097-4489-b33b-8024cb26633e","name":"Interactions","slug":"interactions"}],"lastSaveId":"NWN4xz44N4tkcU5ptpG9"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-12-11T17:22:10.998Z","updatedAt":"2025-12-11T17:22:10.998Z","reported":false}}],"$L5e"]

Suggested for you