---
title: "Img Hotspot — Framer component · Best of Framer"
description: "$4.00 · Framer component · by Agung M · Text. Interactive Image Hotspots"
canonical: "https://framer.elliotli.dev/component/img-hotspot"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Img Hotspot

# Img Hotspot

Interactive Image Hotspots

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

![Img Hotspot preview image 1](https://framer.elliotli.dev/og/component/img-hotspot/8359b9f4fd61287f/1600x1201.jpg)

## Summary

Interactive Image Hotspots

## Description

### **Features & Customizations**

**1\. Precision-Engineered Hotspots**

-   **X/Y Coordinate Positioning:** Place pins exactly where you want them using fluid, percentage-based coordinates that adapt beautifully across all screen sizes.
    
-   **Rich Content Tooltips:** Each pin launches an elegant pop-up card equipped with independent Headlines, supporting Descriptions, and customizable text alignment (Left, Center, Right).
    
-   **Optional Conversions (CTA Buttons):** Instantly turn attention into action. Toggle a dedicated Call-to-Action button inside any tooltip with custom label text and direct URL linking.
    

**2\. Fully Custom Marker Styling**

-   **Tailored UI Dots:** Control the exact diameter (size) and background fill color of your circular pins—complete with full opacity support for a subtle, blended look.
    
-   **Flexible Graphic Engine:** Use the built-in clean default icon or toggle it off entirely. Want total brand alignment? Easily swap the asset for your own custom uploaded SVG or image file.
    

**3\. Advanced Typography & Styling Controls**

-   **Granular Pop-up Theming:** Style your tooltip cards effortlessly with individual background colors and matching text color controls.
    
-   **Triple-Tier Typography Panel:** Separate, comprehensive font controls (Family, Size, Weight, Letter Spacing, and Line Height) for your **Title**, **Description**, and **CTA Button** to match your exact brand guidelines.
    
-   **Standalone Button States:** Give your tooltips a premium finish with dedicated button fill colors and matching text label colors.
    

### **Why This Is a Must-Have Component**

-   **100% Code-Free:** No floating divs or complex math. Move the sliders in your Framer Property Panel, and watch the pins lock into place.
    
-   **Engagement Booster:** Interactive visuals increase user time-on-page and significantly drive click-through rates (CTR) on featured products.
    
-   **Ultra-Smooth Performance:** Driven by Framer Motion for lightweight, physics-based tooltip pop-ups that won't lag your site's load speed.
    

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

-   All · #9334

## Details

- **Author**: Agung M
- **Price**: $4.00
- **Published**: 2026-06-24
- **Updated**: 2026-08-11
- **Added**: 2026-06-24
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing