---
title: "Circle Expand Card — Free Framer component · Best of Framer"
description: "Free Framer component · by Nostromo Studio · Cards. About This Component Circle Expand Card is an interactive media card designed to create bold hover interactions with smooth expanding…"
canonical: "https://framer.elliotli.dev/component/circle-expand-card"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Circle Expand Card

# Circle Expand Card

Animated Hover Expansion Card

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

![Circle Expand Card preview image 1](https://framer.elliotli.dev/og/component/circle-expand-card/b63caf7affd84f89/1600x1200.jpg)

## Summary

About This Component Circle Expand Card is an interactive media card designed to create bold hover interactions with smooth expanding circle animations.

## Description

## About This Component

Circle Expand Card is an interactive media card designed to create bold hover interactions with smooth expanding circle animations.

When hovering the card, the icon background grows dynamically to fill the entire card, creating a fluid transition between the default and hover states. Combined with animated text colors, overlays, and customizable layouts, the result feels modern, playful, and highly interactive.

The component supports flexible text positioning, custom icons, adjustable overlays, and responsive media backgrounds, making it ideal for portfolios, featured content, navigation cards, case studies, or creative landing pages.

### Layout & Content

Choose between **5 built-in layouts**:

-   **Title Bottom Left** — category at the top left, icon at the top right, title and subtitle aligned bottom-left
    
-   **Title Bottom Right** — category at the top left, icon at the top right, title and subtitle aligned bottom-right
    
-   **Title Top Left** — category at the bottom left, icon at the bottom right, title and subtitle aligned top-left
    
-   **Title Top Right** — category at the bottom left, icon at the bottom right, title and subtitle aligned top-right
    
-   **Title Centered** — category at the top left, icon at the top right, title and subtitle perfectly centered
    

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

-   All · #174

## Details

- **Author**: Nostromo Studio
- **Published**: 2026-05-29
- **Updated**: 2026-05-29
- **Added**: 2026-05-14
- **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