51:I[267044,["/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/3z6ke99nzr4_e.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/3ixl4aqv6ylo7.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/00owjoob9gqs9.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"S"] 52:T8c0,

1. Three Hover Treatments, One Component

Choose Directional Blur, Color Tint, or Black & White — no need for three separate components. Each effect shows only its own controls, so the panel stays clean.

2. Directional Blur That Points Somewhere

Most hover blurs are flat. This one has an angle control, so blur direction matches your composition. The image rotates and oversizes itself so no empty corners ever show.

3. A Title Overlay Built for Editorial Layouts

Anchor the title to any corner, add an optional bordered badge, and style typography fully via Framer's font controls — the same system used across this card family for consistent titles.

4. Keyboard-Accessible By Default

The card is focusable, and keyboard focus triggers the same effect as hover — built in from the start, not bolted on later.

5. CMS-Ready for Scalable Portfolios

Image and Title are plain property controls, so the card binds inside a Collection List — add a portfolio piece by adding a CMS item, not rebuilding a card.

Best For:

photographers,
design studios,
editorial sites,
personal portfolios,
agencies mixing image and video work.

Where To Use:

portfolio grids
case studies
editorial galleries
portfolio homepages

Why It Matters: three treatments in one component, an editorial hover feel, keyboard accessibility by default, and a shared title system with Hover Video Card for consistent mixed-media grids.

Why It Stands Out: most hover-effect components offer one effect — this offers three. The blur is genuinely angle-aware. Filter IDs are randomized per instance, so multiple cards never break each other.

Keywords: hover image card, image reveal component, photography hover effect, directional blur hover, black and white hover, image tint hover, portfolio image card, cms image gallery, framer hover effects

50:["$","$L51",null,{"value":{"fallback":{"$inf$activity-creator-232c0d95-92a8-4cf7-b21a-e7f9371c8b6f-all:/unified/creator/232c0d95-92a8-4cf7-b21a-e7f9371c8b6f/activity/":[{"data":[{"id":"01a033eb-aaec-7346-bf53-872e42f2f063","type":"creator.followed","target":{"type":"creator","id":"e0222182-3d74-4d56-b2d9-eba289a28fa5","preview":"Andres","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/e0222182-3d74-4d56-b2d9-eba289a28fa5/ubt5ticx","slug":"andres-jimmy","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"232c0d95-92a8-4cf7-b21a-e7f9371c8b6f","name":"Dacil Kairo","avatar":null,"slug":"dacilkairo","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-24T13:17:57.859Z","latestAt":"2026-08-24T13:17:57.859Z"},{"id":"01a033eb-a7b4-726d-a5b6-8e4de248546f","type":"creator.followed","target":{"type":"creator","id":"c6d0aad4-c0dd-4029-861d-0cd6aaa6f3f4","preview":"Gustavo H. ","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/c6d0aad4-c0dd-4029-861d-0cd6aaa6f3f4/94zcb8k9","slug":"madebygustavoh","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"232c0d95-92a8-4cf7-b21a-e7f9371c8b6f","name":"Dacil Kairo","avatar":null,"slug":"dacilkairo","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-24T13:17:57.039Z","latestAt":"2026-08-24T13:17:57.039Z"},{"id":"019f842d-0340-727e-9368-44d9cabffac4","type":"creator.followed","target":{"type":"creator","id":"e384faea-043f-4f5c-bd25-070ec91488d7","preview":"FramerGeeks","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/65683/avatar-DpmNXlAfqaNbZuhHKKWXXcPtwRkgYh.jpg","slug":"framergeeks","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"232c0d95-92a8-4cf7-b21a-e7f9371c8b6f","name":"Dacil Kairo","avatar":null,"slug":"dacilkairo","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-21T10:16:10.287Z","latestAt":"2026-07-21T10:16:10.287Z"},{"id":"019f5bbd-0628-71dd-8cc1-6f6a80e6878f","type":"post.liked","target":{"type":"post","id":"019f5bbb-5baa-710a-9fdc-99393fcf0442","preview":"KATTO @Framer template preview","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"KATTO "},{"type":"mention","attrs":{"id":"a7cd9fe6-cf81-4a41-8e93-bca0291dba80","slug":"framer","label":"Framer","mentionSuggestionChar":"@"}},{"type":"text","text":" template preview"}]}]},"thumbnail":"https://image.mux.com/HP1Cq01QA1JBmKHZ4hz4YCFEuJNzXJ901EuGzGbbVHH9c/thumbnail.webp?time=9.27","targetDeleted":false,"owned":false,"actions":{"postId":"019f5bbb-5baa-710a-9fdc-99393fcf0442","like":{"count":13,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"232c0d95-92a8-4cf7-b21a-e7f9371c8b6f","name":"Dacil Kairo","avatar":null,"slug":"dacilkairo","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-13T13:49:02.360Z","latestAt":"2026-07-13T13:49:02.360Z"},{"id":"019f5bbc-fe03-73f0-b0d0-287f9b7df75d","type":"post.liked","target":{"type":"post","id":"019f5bba-fb56-7017-ad97-0e2752b721b8","preview":"The fastest way to get bored as a designer?\nKeep making the same thing over and over again.\nI'd rather experiment, fail occasionally, and discover something unexpected along the way.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"The fastest way to get bored as a designer?"}]},{"type":"paragraph","content":[{"type":"text","text":"Keep making the same thing over and over again."}]},{"type":"paragraph","content":[{"type":"text","text":"I'd rather experiment, fail occasionally, and discover something unexpected along the way."}]}]},"thumbnail":"https://image.mux.com/et2YrE2HCeUj00CDMS8jTUh9b47b2VA7IAFCcsY6f6MQ/thumbnail.webp?time=1.3","targetDeleted":false,"owned":false,"actions":{"postId":"019f5bba-fb56-7017-ad97-0e2752b721b8","like":{"count":16,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"232c0d95-92a8-4cf7-b21a-e7f9371c8b6f","name":"Dacil Kairo","avatar":null,"slug":"dacilkairo","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-13T13:49:00.283Z","latestAt":"2026-07-13T13:49:00.283Z"},{"id":"019f5bbc-f2b3-719d-a38c-0fb96b447631","type":"post.liked","target":{"type":"post","id":"019f5baf-665d-74d3-a69a-a1d90c78917f","preview":"Just made my SMMA template 100% Free\nYou don't want to miss this one, link below","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Just made my SMMA template 100% Free"}]},{"type":"paragraph","content":[{"type":"text","text":"You don't want to miss this one, link below"}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/addd49dc-5598-4a91-88e5-90856b29062a/019f7ab3-9e74-71e2-bdd6-7ea7c9ae3574.png","targetDeleted":false,"owned":false,"actions":{"postId":"019f5baf-665d-74d3-a69a-a1d90c78917f","like":{"count":23,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"232c0d95-92a8-4cf7-b21a-e7f9371c8b6f","name":"Dacil Kairo","avatar":null,"slug":"dacilkairo","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-13T13:48:57.382Z","latestAt":"2026-07-13T13:48:57.382Z"},{"id":"019f5bb1-b006-70a9-aaa9-1dba766ad43e","type":"creator.followed","target":{"type":"creator","id":"ae7e902c-1542-4db6-8891-24d45b4675e4","preview":"Serwah Attafuah","previewJson":null,"thumbnail":null,"slug":"wrathstudios","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"232c0d95-92a8-4cf7-b21a-e7f9371c8b6f","name":"Dacil Kairo","avatar":null,"slug":"dacilkairo","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-13T13:36:39.425Z","latestAt":"2026-07-13T13:36:39.425Z"},{"id":"019f5bb1-ad1f-7079-9a69-c68d338f2f98","type":"creator.followed","target":{"type":"creator","id":"938f4173-e2d4-4d74-af7b-4f735e7e87fa","preview":"Joann Kim","previewJson":null,"thumbnail":null,"slug":"joann-kim","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"232c0d95-92a8-4cf7-b21a-e7f9371c8b6f","name":"Dacil Kairo","avatar":null,"slug":"dacilkairo","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-13T13:36:38.683Z","latestAt":"2026-07-13T13:36:38.683Z"},{"id":"019f5bb1-aab1-74cc-836f-15a738117547","type":"creator.followed","target":{"type":"creator","id":"8d31eafc-b07a-4335-9e9a-c6e1f4c30750","preview":"Kalbe Haider","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8d31eafc-b07a-4335-9e9a-c6e1f4c30750/2y23n73c","slug":"kalbe-haider","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"232c0d95-92a8-4cf7-b21a-e7f9371c8b6f","name":"Dacil Kairo","avatar":null,"slug":"dacilkairo","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-13T13:36:38.061Z","latestAt":"2026-07-13T13:36:38.061Z"},{"id":"019f5bb1-a826-77ca-baf4-8192034a8f77","type":"creator.followed","target":{"type":"creator","id":"547b6049-323f-4142-8e6d-a72f191c8f50","preview":"XIAO SUN","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/36930/908bf7d8c454be8f59654aa83b6b0ea4-mNqrHZDyKBrmYFp3Tw7rYW1l5IKocR","slug":"xiao-sun","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"232c0d95-92a8-4cf7-b21a-e7f9371c8b6f","name":"Dacil Kairo","avatar":null,"slug":"dacilkairo","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-13T13:36:37.411Z","latestAt":"2026-07-13T13:36:37.411Z"},{"id":"019f439d-61b6-7768-a12a-064ef1c7be4c","type":"creator.followed","target":{"type":"creator","id":"212d3a0f-3947-431e-a324-564459c3eec8","preview":"Mushfiq","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/212d3a0f-3947-431e-a324-564459c3eec8/z3qjrb0p","slug":"uxmushfq","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"232c0d95-92a8-4cf7-b21a-e7f9371c8b6f","name":"Dacil Kairo","avatar":null,"slug":"dacilkairo","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-08T21:23:35.473Z","latestAt":"2026-07-08T21:23:35.473Z"},{"id":"019f1ecd-936c-7368-b8d5-be6dca09e0a0","type":"creator.followed","target":{"type":"creator","id":"46ccc977-7c3e-4106-bc69-99231c8ffbd2","preview":"Studio Apes","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/46ccc977-7c3e-4106-bc69-99231c8ffbd2/lvid994a","slug":"studioapes","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"232c0d95-92a8-4cf7-b21a-e7f9371c8b6f","name":"Dacil Kairo","avatar":null,"slug":"dacilkairo","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-01T17:50:16.936Z","latestAt":"2026-07-01T17:50:16.936Z"},{"id":"019f1e1b-5306-7794-ad72-c5209f25f531","type":"creator.followed","target":{"type":"creator","id":"a0d236b2-97bf-42fd-ad0e-db4402ef113b","preview":"Cristian Mielu","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/28883/avatar-K5ojCTv2bAJrkxuByVEiWGqgqe7d73.jpg","slug":"cristian","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"232c0d95-92a8-4cf7-b21a-e7f9371c8b6f","name":"Dacil Kairo","avatar":null,"slug":"dacilkairo","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-01T14:35:35.035Z","latestAt":"2026-07-01T14:35:35.035Z"},{"id":"019f1e1b-4ed3-76cb-9be9-f6eb50763db3","type":"creator.followed","target":{"type":"creator","id":"9fe0915a-1d2c-44d4-ae44-5251ad7dce8f","preview":"Cédric","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/28870/avatar.jpg","slug":"cedric","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"232c0d95-92a8-4cf7-b21a-e7f9371c8b6f","name":"Dacil Kairo","avatar":null,"slug":"dacilkairo","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-01T14:35:33.964Z","latestAt":"2026-07-01T14:35:33.964Z"},{"id":"019f17e8-87b4-708d-8d7d-ae27bae3e6e4","type":"creator.followed","target":{"type":"creator","id":"84a07df8-2e35-4e29-96a3-344013a2adbf","preview":"Prashant Chamoli","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/28928/Prashant-Hx0f0ihuO5pWTQ6rWPB4CTmLYi2m7d.jpg","slug":"prashant-chamoli","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"232c0d95-92a8-4cf7-b21a-e7f9371c8b6f","name":"Dacil Kairo","avatar":null,"slug":"dacilkairo","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-30T09:42:22.897Z","latestAt":"2026-06-30T09:42:22.897Z"},{"id":"019f154d-b662-753f-af33-5efbb4a3277a","type":"creator.followed","target":{"type":"creator","id":"a86e4466-b94b-444e-9ee7-4c78f1bddb23","preview":"mll cph","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a86e4466-b94b-444e-9ee7-4c78f1bddb23/7y5bbap5","slug":"m-ll-d7ixd8","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"232c0d95-92a8-4cf7-b21a-e7f9371c8b6f","name":"Dacil Kairo","avatar":null,"slug":"dacilkairo","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-29T21:34:02.328Z","latestAt":"2026-06-29T21:34:02.328Z"},{"id":"019f154d-b07b-71bd-a889-3e761ee61753","type":"creator.followed","target":{"type":"creator","id":"2f83afc3-faf9-4f3e-904a-339182df4c74","preview":"Adisa Joshua","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/149736/avatar-38llxxbh36vGceXmGsJCH8CRoMQ79k.jpg","slug":"adisa-joshua","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"232c0d95-92a8-4cf7-b21a-e7f9371c8b6f","name":"Dacil Kairo","avatar":null,"slug":"dacilkairo","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-29T21:34:00.823Z","latestAt":"2026-06-29T21:34:00.823Z"},{"id":"019f154d-ae1d-755a-aa70-1dc05a7d96a3","type":"creator.followed","target":{"type":"creator","id":"961fcd8f-9350-44f9-ad14-248b9b2740a2","preview":"Gary Szaszik","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/961fcd8f-9350-44f9-ad14-248b9b2740a2/3nq7amlr","slug":"gary-szaszik","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"232c0d95-92a8-4cf7-b21a-e7f9371c8b6f","name":"Dacil Kairo","avatar":null,"slug":"dacilkairo","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-29T21:34:00.215Z","latestAt":"2026-06-29T21:34:00.215Z"},{"id":"019f154d-ab9c-76ab-90b0-0dc5e5145241","type":"creator.followed","target":{"type":"creator","id":"ffe5a37f-4bc6-40c1-b2e4-fc2ee125c217","preview":"Pablo Picart","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1763722/avatar-Ptoiz3mpXGpEJi283GinKthC7NfDor.jpg","slug":"pablo-picart-8bwjri","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"232c0d95-92a8-4cf7-b21a-e7f9371c8b6f","name":"Dacil Kairo","avatar":null,"slug":"dacilkairo","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-29T21:33:59.576Z","latestAt":"2026-06-29T21:33:59.576Z"},{"id":"019f154d-a99b-7698-8a33-4e975c2bf2a3","type":"creator.followed","target":{"type":"creator","id":"fe2059bb-575a-4b10-98b2-f4568ad1dd11","preview":"Ronald Clauss","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/534254/avatar-CPbsOHMPdKtxWLCvK7Q1prSvE6crQV.jpg","slug":"ronald-clauss","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"232c0d95-92a8-4cf7-b21a-e7f9371c8b6f","name":"Dacil Kairo","avatar":null,"slug":"dacilkairo","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-29T21:33:59.061Z","latestAt":"2026-06-29T21:33:59.061Z"}],"pagination":{"next":"MjAyNi0wNi0yOVQyMTozMzo1OS4wNjFafDAxOWYxNTRkLWE5OWItNzY5OC04YTMzLTRlOTc1YzJiZjJhMw","previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:232c0d95-92a8-4cf7-b21a-e7f9371c8b6f:/unified/posts/?creator=232c0d95-92a8-4cf7-b21a-e7f9371c8b6f&with=reposts":[{"data":[{"id":"019f1e13-62dc-737e-a067-fcaf5bf3230d","title":null,"body":"

Check our first FREE Component: Portfolio Image Card -> A portfolio image card with three switchable hover treatments: directional blur, color tint, or black & white — pick the mood per project, no extra components needed.

The blur isn't flat — it's angle-aware, so it points the direction your composition wants. Keyboard-focusable by default, and CMS-bindable so it scales straight from a Collection List.

Built as part of a small card family — pairs with Hover Video Card (Coming Soon) for anyone running a mixed photo + video portfolio and wanting consistent title styling across both.

Free to copy. Let me know what you build with it.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Check our first FREE Component: Portfolio Image Card -> ","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://framer.link/A2GSnrB","target":"_blank"}}]},{"type":"text","text":"A portfolio image card with three switchable hover treatments: directional blur, color tint, or black & white — pick the mood per project, no extra components needed."}]},{"type":"paragraph","content":[{"type":"text","text":"The blur isn't flat — it's angle-aware, so it points the direction your composition wants. Keyboard-focusable by default, and CMS-bindable so it scales straight from a Collection List."}]},{"type":"paragraph","content":[{"type":"text","text":"Built as part of a small card family — pairs with "},{"type":"text","text":"Hover Video Card (Coming Soon)","marks":[{"type":"bold"}]},{"type":"text","text":" for anyone running a mixed photo + video portfolio and wanting consistent title styling across both."}]},{"type":"paragraph","content":[{"type":"text","text":"Free to copy. Let me know what you build with it."}]}]},"author":{"framerUserId":"232c0d95-92a8-4cf7-b21a-e7f9371c8b6f","name":"Dacil Kairo","slug":"dacilkairo","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"link-preview","url":"https://framer.link/A2GSnrB","metadata":{"title":"Portfolio Image Card: Free Interactions Component by Dacil Kairo","description":"Portfolio image card CMS Ready — Portfolio Image Card by Dacil Kairo — explore this Framer Component on the Framer Marketplace and customize it in Framer's no-code website builder.","imageUrl":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/opengraph/3988b8cef9cd4d94/image.png","siteName":"Framer Community","faviconUrl":null}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-01T14:26:54.817Z","updatedAt":"2026-07-01T14:26:54.817Z"},{"id":"019f1395-b65a-715b-82eb-52b4b7952231","title":null,"body":"

Hover Image Card — free, out now 🎬

A portfolio image card with three switchable hover treatments: directional blur, color tint, or black & white — pick the mood per project, no extra components needed.

The blur isn't flat — it's angle-aware, so it points the direction your composition wants. Keyboard-focusable by default, and CMS-bindable so it scales straight from a Collection List.

Built as part of a small card family — pairs with Hover Video Card (Coming Soon) for anyone running a mixed photo + video portfolio and wanting consistent title styling across both.

Free to copy. Let me know what you build with it.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hover Image Card — free, out now ","marks":[{"type":"bold"}]},{"type":"emoji","attrs":{"name":"clapper","emoji":"🎬"}}]},{"type":"paragraph","content":[{"type":"text","text":"A portfolio image card with three switchable hover treatments: directional blur, color tint, or black & white — pick the mood per project, no extra components needed."}]},{"type":"paragraph","content":[{"type":"text","text":"The blur isn't flat — it's angle-aware, so it points the direction your composition wants. Keyboard-focusable by default, and CMS-bindable so it scales straight from a Collection List."}]},{"type":"paragraph","content":[{"type":"text","text":"Built as part of a small card family — pairs with "},{"type":"text","text":"Hover Video Card (Coming Soon)","marks":[{"type":"bold"}]},{"type":"text","text":" for anyone running a mixed photo + video portfolio and wanting consistent title styling across both."}]},{"type":"paragraph","content":[{"type":"text","text":"Free to copy. Let me know what you build with it."}]}]},"author":{"framerUserId":"232c0d95-92a8-4cf7-b21a-e7f9371c8b6f","name":"Dacil Kairo","slug":"dacilkairo","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"BASNzM4wK2YhMSMgCFqe","resolved":true,"title":"Portfolio Image Card","body":"$52","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"1. Three Hover Treatments, One Component","marks":[{"type":"bold"}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Choose Directional Blur, Color Tint, or Black & White — no need for three separate components. Each effect shows only its own controls, so the panel stays clean."}]},{"type":"paragraph","content":[{"type":"text","text":"2. Directional Blur That Points Somewhere","marks":[{"type":"bold"}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Most hover blurs are flat. This one has an angle control, so blur direction matches your composition. The image rotates and oversizes itself so no empty corners ever show."}]},{"type":"paragraph","content":[{"type":"text","text":"3. A Title Overlay Built for Editorial Layouts","marks":[{"type":"bold"}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Anchor the title to any corner, add an optional bordered badge, and style typography fully via Framer's font controls — the same system used across this card family for consistent titles."}]},{"type":"paragraph","content":[{"type":"text","text":"4. Keyboard-Accessible By Default","marks":[{"type":"bold"}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"The card is focusable, and keyboard focus triggers the same effect as hover — built in from the start, not bolted on later."}]},{"type":"paragraph","content":[{"type":"text","text":"5. CMS-Ready for Scalable Portfolios","marks":[{"type":"bold"}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Image and Title are plain property controls, so the card binds inside a Collection List — add a portfolio piece by adding a CMS item, not rebuilding a card."}]},{"type":"paragraph","content":[{"type":"text","text":"Best For","marks":[{"type":"bold"}]},{"type":"text","text":": "}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"photographers, "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"design studios, "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"editorial sites, "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"personal portfolios, "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"agencies mixing image and video work."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Where To Use:","marks":[{"type":"bold"}]},{"type":"text","text":" "}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"portfolio grids"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"case studies"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"editorial galleries"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"portfolio homepages"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Why It Matters: ","marks":[{"type":"bold"}]},{"type":"text","text":"three treatments in one component, an editorial hover feel, keyboard accessibility by default, and a shared title system with Hover Video Card for consistent mixed-media grids."}]},{"type":"paragraph","content":[{"type":"text","text":"Why It Stands Out:","marks":[{"type":"bold"}]},{"type":"text","text":" most hover-effect components offer one effect — this offers three. The blur is genuinely angle-aware. Filter IDs are randomized per instance, so multiple cards never break each other. "}]},{"type":"paragraph","content":[{"type":"text","text":"Keywords: hover image card, image reveal component, photography hover effect, directional blur hover, black and white hover, image tint hover, portfolio image card, cms image gallery, framer hover effects","marks":[{"type":"italic"}]}]}]},"introduction":"Portfolio image card CMS Ready","slug":"portfolio-image-card","author":{"framerUserId":"232c0d95-92a8-4cf7-b21a-e7f9371c8b6f","name":"Dacil Kairo","slug":"dacilkairo","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/232c0d95-92a8-4cf7-b21a-e7f9371c8b6f/4txrwp0q","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1180,"height":697}}],"post":null,"createdAt":"2026-06-29T13:33:26.461Z","updatedAt":"2026-06-29T14:03:01.265Z","publishedAt":"2026-06-29T13:33:26.458Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Portfolio-Image-Card-sX3lyU.js@ftJ9ZPXFbLPKQVbjx3aK","previewUrl":"https://motionblurportfoliocard.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"ftJ9ZPXFbLPKQVbjx3aK","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":59,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-29T13:33:26.491Z","updatedAt":"2026-06-29T13:33:26.491Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L53"}]