---
title: "Portfolio Image Card — Free Framer component · Best of Framer"
description: "Free Framer component · by Dacil Kairo · Cards. Keywords: hover image card, image reveal component, photography hover effect, directional blur hover, black and white hover, image tint…"
canonical: "https://framer.elliotli.dev/component/portfolio-image-card"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Portfolio Image Card

# Portfolio Image Card

Portfolio image card CMS Ready

[View on Framer](https://framer.com/marketplace/components/portfolio-image-card/?via=elliot-li)

![Portfolio Image Card preview image 1](https://framer.elliotli.dev/og/component/portfolio-image-card/eb7aeb42304b82db/1600x945.jpg)

## Summary

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…

## Description

**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_

## Rank history [How rankings work →](/terms#rankings)

-   All · #1056

## Details

- **Author**: Dacil Kairo
- **Published**: 2026-06-29
- **Updated**: 2026-06-29
- **Added**: 2026-06-29
- **Categories**: Cards

## More like this

-   [BlogX Blog Card](/component/blogx-blog-card) — Themomarket · $8 — Blog Framer Component
-   [FluxPrice](/component/fluxprice) — Jeshan Athulesh · $49 — Elevate your SaaS conversion rate in minutes with FluxPrice.
-   [Feature Ribbon Cards](/component/feature-ribbon-cards) — Studio Digital · Free — Interactive image feature cards
-   [Dynamic Pricing Calc](/component/dynamic-pricing-calc) — Dmitry Vorobey · $12 — Pricing cards with live calculator