---
title: "Magnetic Hover Cards — Free Framer component · Best of Framer"
description: "Free Framer component · by Brandson Digital · Cards. What it is Magnetic Hover Cards is a reusable card set with direction-aware hover interaction."
canonical: "https://framer.elliotli.dev/component/magnetic-hover-cards"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Magnetic Hover Cards

# Magnetic Hover Cards

Directional magnetic hover cards

[View on Framer](https://framer.com/marketplace/components/magnetic-hover-cards/?via=elliot-li)

![Magnetic Hover Cards preview image 1](https://framer.elliotli.dev/og/component/magnetic-hover-cards/8f7f2d492761070e/1600x1200.jpg)

## Summary

What it is Magnetic Hover Cards is a reusable card set with direction-aware hover interaction.

## Description

## What it is

Magnetic Hover Cards is a reusable card set with direction-aware hover interaction.

Each card detects where the cursor enters and leaves, creating a smooth magnetic slide effect.

It works equally well for:

• Logos

• Social media links

• Brand grids

• Media previews

• Portfolio blocks

• Any custom content

## Features

• Direction-aware hover animation

• Smooth, subtle motion timing

• Works with any inner content (not logo-specific)

• 6 cards included

• Desktop, tablet and mobile layout variants

• Clean and organized layer structure

## Customization

You can easily:

• Replace content inside each card

• Use logos, icons, text or images

• Adjust overlay color in the override

• Modify layout through variants

• Combine with stacks or grids

The component is intentionally flexible and content-agnostic.

## Usage

Paste the component into your canvas.

Replace the content inside each card.

Choose the layout variant depending on your breakpoint.

Use it as a full section or adapt individual cards for custom layouts.

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

-   All · #923

## Details

- **Author**: Brandson Digital
- **Published**: 2026-02-16
- **Updated**: 2026-02-16
- **Added**: 2026-02-05
- **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