---
title: "Photo Hotspots — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Nostromo Studio · Interactive. Photo Hotspots turns any image into a clickable diagram."
canonical: "https://framer.elliotli.dev/component/photo-hotspots"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Photo Hotspots

# Photo Hotspots

Pin clickable markers on any image

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

![Photo Hotspots preview image 1](https://framer.elliotli.dev/og/component/photo-hotspots/c8a709a3eb85f43f/1600x1200.jpg)

## Summary

Photo Hotspots turns any image into a clickable diagram.

## Description

**Photo Hotspots** turns any image into a clickable diagram. Place **markers anywhere on a photo**, product shot, map or floor plan, and each opens a titled card with a description and an optional link or button — great for feature call-outs, shoppable images and step-by-steps.

Markers sit on X / Y percentages, so they stay put as the image scales, and almost every part — dot, rings, card, type and links — is a native Framer control, styled like everything else in Framer.

Show labels **Always**, on **Hover** or on **Click**, keep several open with Keep Open, and give each hotspot its own link: a page, a section anchor or a URL, shown as the whole card or a styled CTA button. Inside a CMS collection, **CMS mode gives 10 position** and text slots to bind to fields.

## Key Features

-   Manual mode: unlimited markers by X / Y %. CMS mode: 10 bindable slots
    
-   Title, subtitle, per-hotspot link and button label; empty hotspots are hidden
    
-   Label Always / Hover / Click, click-outside to dismiss, optional Keep Open
    
-   Card position Top / Bottom / Left / Right, with align and offsets
    
-   Card fill, frosted background blur, radius, border and shadow
    
-   Dot colour, hover colour, size, blur, border and shadow
    
-   One to three rings, filled disks or outlines, with optional sonar animation
    
-   Framer font picker for title and subtitle, plus line gap and a text-shadow
    
-   Whole-card link or a CTA button with full fill, text, hover and border styling
    
-   Static-friendly preview; pointer only on the dot and buttons; role + aria-label on link markers
    

## How to Set Up

1.  Drag Photo Hotspots onto your canvas and set its size
    
2.  Choose your image — it fills the frame, so crop it first
    
3.  Add hotspots and set each X / Y, title, subtitle and link
    
4.  Pick Display (Always / Hover / Click) and the label position
    
5.  Style the dot, rings, card, type and buttons
    
6.  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 · #5061

## Details

- **Author**: Nostromo Studio
- **Price**: $9.00
- **Published**: 2026-08-28
- **Updated**: 2026-09-05
- **Added**: 2026-08-28
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase