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
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
Dacil Kairo
