57:I[473921,["/creators-assets/_next/static/immutable/chunks/3c-b-8ufmviux.js","/creators-assets/_next/static/immutable/chunks/2lb80c7sdmm1x.js","/creators-assets/_next/static/immutable/chunks/24qz5wotuh5hj.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/0j6nsovyxcqkz.js","/creators-assets/_next/static/immutable/chunks/3mwqlk6tp5l2t.js","/creators-assets/_next/static/immutable/chunks/2dvu3r_tb3ihz.js","/creators-assets/_next/static/immutable/chunks/1q7v4rdbqi_5d.js","/creators-assets/_next/static/immutable/chunks/2fw--q9y_1nc-.js","/creators-assets/_next/static/immutable/chunks/1w_rozgc2dplq.js","/creators-assets/_next/static/immutable/chunks/0dglr8x18qkm5.js","/creators-assets/_next/static/immutable/chunks/0a8vglvd9phm3.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/06p8bv9p94pxh.js","/creators-assets/_next/static/immutable/chunks/42u1pxaq7eeka.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/2bbm33yuxi64a.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/0kjwwabuczr28.js","/creators-assets/_next/static/immutable/chunks/088oy6f_9ll4s.js","/creators-assets/_next/static/immutable/chunks/22zq93dcklbwz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/0eljubaqaqluk.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3g7os-hf6q3tv.js","/creators-assets/_next/static/immutable/chunks/1e3mmtw6okz19.js","/creators-assets/_next/static/immutable/chunks/3fcb65_46-jt7.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/28h79imj-g45k.js","/creators-assets/_next/static/immutable/chunks/2x3imtac9af--.js","/creators-assets/_next/static/immutable/chunks/2t6l_zgbmmx8u.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/0_ulklfcrp-s3.js","/creators-assets/_next/static/immutable/chunks/3-uff2nrv83hw.js","/creators-assets/_next/static/immutable/chunks/0alicgkopr9se.js","/creators-assets/_next/static/immutable/chunks/0-kepukl8ldjk.js","/creators-assets/_next/static/immutable/chunks/2-u6q7fsgfx0e.js"],"PostDetailCard"] 58:Tae4,

Hover or tap to extend the card — designed to reveal property details only when needed, keeping the interface clean and focused. Perfect for layouts where visuals take priority and data stays secondary until interaction.

About this Component

A clean, interaction-driven property card that expands smoothly to reveal key details like price, specs, and actions. The default state highlights the property image, while hover (desktop) or tap (mobile) reveals additional information with a subtle, seamless transition.

Built using a visual layout enhanced with lightweight code overrides for smooth, responsive interaction across devices.

Features

Hover to expand on desktop, tap to expand on mobile
Smooth reveal animation with subtle elevation and scaling
Image-first layout for a clean visual hierarchy
Expanded state shows title, property details, and pricing
Built-in property stats (beds, baths, area)
Minimal design with progressive content reveal
Fully customizable via Framer properties
Lightweight and performant

Use Cases

Real estate property listings
Property showcase sections
Landing pages with featured listings
Portfolio or case study cards
Product cards with hidden details
Content-heavy layouts that need visual clarity

Built For

Designers who want clean, interactive card layouts without clutter
Developers looking for a ready-to-use expandable card
Creators building modern, minimal UI systems in Framer

How to Use

Drag the component onto your Framer canvas
Add your property image, title, and details
Adjust values like price, stats, and labels
Customize styling (colors, radius, layout)
Preview hover (desktop) or tap (mobile) interaction
Publish — your interactive property card is ready

54:[["$","$L57",null,{"post":{"id":"019db973-d119-73c2-8dde-12f62cb457de","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"e90a9d69-be1d-451a-be2e-2941e3ef1624","name":"Sameera Ghosalkar","slug":"designbysameera","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1993294/avatar-X79AKxD5FTZdENqssDvXxsSZ2DeM0H.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"OL12Q3r7ggGUpSLjTBNU","resolved":true,"title":"Property Card Hover ","body":"$58","bodyJson":null,"introduction":"Built for modern real estate interfaces ","slug":"property-card-hover","author":{"framerUserId":"e90a9d69-be1d-451a-be2e-2941e3ef1624","name":"Sameera Ghosalkar","slug":"designbysameera","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1993294/avatar-X79AKxD5FTZdENqssDvXxsSZ2DeM0H.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/OL12Q3r7ggGUpSLjTBNU/property-card-hover-QaFDcN9yFaQFHpye2wDnB38eUxD6kT","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-15T12:18:59.298Z","updatedAt":"2026-06-14T14:08:57.878Z","publishedAt":"2026-04-23T08:27:48.377Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://property-card-hover-real-estate-ui.framer.website/","price":"8","paymentUrl":"https://contra.com/payment-link/sIRFp2Ab-property-card-hover","workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"Ys8xWBAWebGJr9NbxVfp","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-23T08:27:48.377Z","updatedAt":"2026-04-23T08:27:48.377Z","reported":false,"type":"post"}}],"$L59"]

Suggested for you