Post thumbnail: 17 CSS Hotspots

17 CSS Hotspots

Collection of hand-picked free HTML and CSS hotspot code examples. Update of July 2017 collection. 3 new items.

Table of Contents

  1. Hotspots
  2. Hotspot Buttons

Related Articles

  1. CSS Tooltips
  2. CSS Buttons

Hotspots

13 HTML and CSS hotspot code examples.


Demo image: Hotspots Flip

Author

  • Tomas Cordero

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jquery.js, tweenmax.js)

About the code

Hotspots Flip

Simple card flip for hotspots using GSAP. Works in IE 10+, Chrome, Firefox, and Safari. Has IE 9 fall back (just opens card).

Demo image: Image Hotspots

Author

  • Vinicius Sueiro

Made with

  • HTML/Pug
  • CSS/Sass (font-awesome.css)
  • JavaScript/Babel

About the code

Image Hotspots

Image hotspots with gallery.

Demo Image: Image Hotspot Concept With Vue.js
Demo Image: Image Hotspot Concept With Vue.js

Image Hotspot Concept With Vue.js

Image hotspot experiment using Vue and flickity carousel. Not really optimized for mobile… Sorry. :)
Made by Irko Palenius
June 22, 2017

Demo Image: Draggable Image Hotspots
Demo Image: Draggable Image Hotspots

Draggable Image Hotspots

Click on the image to create hotspots. Drag to change positions.
Made by Michael Wilhelmsen
May 16, 2017

Demo Image: Responsive Map Hotspots
Demo Image: Responsive Map Hotspots

Responsive Map Hotspots

Responsive map hotspots in HTML, CSS and JavaScript.
Made by Dan Coolbeth
May 10, 2017

Demo Image: JWS Hotspot Module
Demo Image: JWS Hotspot Module

JWS Hotspot Module

Hotspot module with HTML, CSS and JavaScript.
Made by Jose (Machinas)
March 16, 2017

Demo Image: Tracking Hotspots
Demo Image: Tracking Hotspots

Tracking Hotspots

Tracking hotspots on a 360˙ slider with CSS 3D.
Made by Craig Morey
October 25, 2016

Demo Image: Hotspots In 3D
Demo Image: Hotspots In 3D

Hotspots In 3D

Interactive hotspots in 3D with HTML and JavaScript.
Made by Armand
October 6, 2016

Demo image: Simple Hotspots

Author

  • a charles

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Simple Hotspots

Simple hotspots with HTML, CSS and JS.

Demo Image: Animated ViewBox Data Visualization
Demo Image: Animated ViewBox Data Visualization

Animated ViewBox Data Visualization

Showing how animating the viewbox retains context and helps with revealing animation for data visualization.
Made by Sarah Drasner
June 8, 2016

Demo Image: Image Hotspots
Demo Image: Image Hotspots

Image Hotspots

HTML, CSS and JavaScript image hotspots.
Made by Jon Stuebe
December 30, 2015

Demo Image: Centered Background Image With Hot Spots
Demo Image: Centered Background Image With Hot Spots

Centered Background Image With Hot Spots

Fully responsive! Also, animal.
Made by Adam Grayson
September 2, 2015

Demo Image: CSS Hotspots
Demo Image: CSS Hotspots

CSS Hotspots

Pure CSS image hostspots.
Made by Samiullah Khan
September 15, 2014

Hotspot Buttons

4 HTML and CSS simple hotspot button code examples.


Demo Image: Hotspots Experiments
Demo Image: Hotspots Experiments

Hotspots Experiments

HTML and CSS hotspots experiments.
Made by Gabin Aureche
September 27, 2016

Demo Image: Hotspot Experiments
Demo GIF: Hotspot Experiments

Hotspot Experiments

HTML and CSS hotspot experiments.
Made by Phil Carter
September 15, 2015

Demo Image: SVG Hotspot/Play Button Animation
Demo GIF: SVG Hotspot/Play Button Animation

SVG Hotspot/Play Button Animation

Hotspot/Play button animation. Prototype made with TimelineMax.js.
Made by Robert Bue
September 1, 2015

Demo Image: Hotspot Button
Demo GIF: Hotspot Button

Hotspot Button

Hotspot button in HTML and CSS.
Made by Shannon Smith
March 6, 2015

back to top