---
title: "Soft Focus Card — Free Framer component · Best of Framer"
description: "Free Framer component · by Nostromo Studio · Cards. Soft Focus Card turns any image or video into a polished brand card."
canonical: "https://framer.elliotli.dev/component/soft-focus-card"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Soft Focus Card

# Soft Focus Card

A media card that blurs on hover

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

![Soft Focus Card preview image 1](https://framer.elliotli.dev/og/component/soft-focus-card/475d573eb003483c/1600x1200.jpg)

## Summary

Soft Focus Card turns any image or video into a polished brand card.

## Description

**Soft Focus Card** turns any image or video into a polished brand card. The media sits under a soft blur — a fade along the bottom, or a vignette that eases the edges out of focus — with your logo centered on top. Hover it and the whole card softens: the media blurs and drifts in as the logo scales down, on one easing you control.

## Made to Fit Your Design

Load an image or a video, from an upload or a URL, and set a focal point so the crop sits where you want. Pick the blur shape and strength, tune the hover blur and zoom, and drive every motion with a single Transition. Add an optional color overlay, a keyline frame in any color and weight, and a clean corner radius.

## Key Features

### Media

-   Image or Video, each from an upload or a URL
    
-   Poster for video, shown on the canvas and while it loads
    
-   Focal X / Y to place the crop
    
-   Independent sources for the media and the logo
    

### Blur

-   Bottom fade or edge Vignette, with adjustable blur and reach
    
-   Soft, gradual falloff at any size
    
-   On hover the media blurs and zooms while the logo scales down
    
-   One Transition drives the media zoom, logo zoom and blur together
    

### Video

-   Autoplay on or off
    
-   Play on Hover when autoplay is off, Pause on Hover when it is on
    
-   Muted by default, with optional Unmute on Hover
    
-   Loops, and pauses when scrolled out of view
    

### Style & Link

-   Optional color overlay, on or off
    
-   Keyline frame: color and weight, plus corner radius
    
-   Centered logo with adjustable width, capped so it never overflows
    
-   Turn the whole card into a link, with an optional new tab
    

## How to Set Up

1.  Drag Soft Focus Card onto your canvas
    
2.  Set Media to Image or Video
    
3.  Add a logo and pick the blur shape
    
4.  Adjust the hover blur, zoom and transition to taste
    
5.  Publish
    

## **Refund Policy**

All sales of digital products are final and non-refundable. Questions? Contact [hellonostromostudio@gmail.com](mailto:hellonostromostudio@gmail.com) before purchasing. Enjoy!

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

-   All · #4346

## Details

- **Author**: Nostromo Studio
- **Published**: 2026-09-08
- **Updated**: 2026-09-08
- **Added**: 2026-09-08
- **Categories**: Cards

## More like this

-   [Particle Team Cards](/component/particle-team-cards) — Frame Native · Free — Portraits that move as particles
-   [Card Swap](/component/card-swap) — Antoine Lacombled · $9 — A 3D card stack you can fling
-   [Overlay Reveal Card](/component/overlay-reveal-card) — Pentaclay · Free — Project Card With Hover Overlay
-   [Deckshift](/component/deckshift) — BeyondPixel · $15 — Interactive Stacked Focus Cards