HOTSPOTS

HTML and CSS hotspots with modal window.

See the Pen Hotspots for Email (CSS Only) by Jack (@jack-taylor89) on CodePen.light

Author

  • Jack

Made with

  • HTML / CSS

HOTSPOT LABELS

Hotspot labels for email in HTML and CSS.

See the Pen Hotspot labels – email html css by Jay (@emailjay) on CodePen.light

Author

  • Jay

Made with

  • HTML / CSS

INTERACTIVE WEB ACCESSIBILITY CHEAT SHEET WITH HOTSPOTS

15 quick tips to improve the web accessibility of your web pages. Some of them may seem obvious and more based on usability, but still they are important, make the web more accessible… and they are easy to implement.

See the Pen Interactive Web Accessibility Cheat Sheet by Alvaro Montoro (@alvaromontoro) on CodePen.light

Author

  • Alvaro Montoro

Made with

  • HTML / CSS / JavaScript

IMAGE HOTSPOTS MOBILE FRIENDLY

Interactive hotspots – click or tap to see labels. Labels can be positioned so the hotspot is attached to any corner.

See the Pen Image hotspots (mobile friendly) by Stephen Lee (@abcretrograde) on CodePen.light

Author

  • Stephen Lee

Made with

  • HTML / CSS (SCSS) / JavaScript

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).

See the Pen Hotspots flip by Tomas Cordero (@tcorderoIV) on CodePen.light

Author

  • Tomas Cordero

Made with

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

IMAGE HOTSPOTS

Image hotspots with gallery.

See the Pen Image hotspots by Vinicius Sueiro (@vsueiro) on CodePen.light

Author

  • Vinicius Sueiro

Made with

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

Image Hotspot Concept With Vue.js

Image hotspot experiment using Vue and flickity carousel. Not really optimized for mobile… Sorry. 🙂
Made by Irko Palenius

See the Pen Image Hotspot concept with Vue by Irko Palenius (@ispal) on CodePen.light

Demo and Download

Draggable Image Hotspots

Click on the image to create hotspots. Drag to change positions.
Made by Michael Wilhelmsen

See the Pen Draggable Image Hotspots by Michael Wilhelmsen (@michaelwilhelmsen) on CodePen.light

Demo and Download

Responsive Map Hotspots

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

See the Pen Responsive Map Hotspots by Dan Coolbeth (@katartgraphics) on CodePen.light

Demo and Download

JWS Hotspot Module

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

See the Pen JWS hotspot module by Jose (Machinas) (@jose_machinas) on CodePen.light

Demo and Download

Tracking Hotspots

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

See the Pen tracking hotspots on a 360˙ slider with CSS3D by Craig Morey (@pixelthing) on CodePen.light

Demo and Download

Hotspots In 3D

Interactive hotspots in 3D with HTML and JavaScript.
Made by Armand

See the Pen LRLoOo by Armand (@Armand) on CodePen.light

Demo and Download

SIMPLE HOTSPOTS

Simple hotspots with HTML, CSS and JS.

See the Pen Simple Hotspots by a charles (@varcharles) on CodePen.light

Author

  • a charles

Made with

  • HTML
  • CSS
  • JavaScript

Animated ViewBox Data Visualization

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

See the Pen Animated viewBox Data Visualization by Sarah Drasner (@sdras) on CodePen.light

Demo and Download

Image Hotspots

See the Pen image hotspots by Jon Stuebe (@jonstuebe) on CodePen.light

Author

  • Jon Stuebe

Made with

  • Html / CSS / JavaScript
Demo and Download

Centered Background Image With Hot Spots

Fully responsive! Also, animal.
Made by Adam Grayson

See the Pen centered background Image with hot spots by Adam (@agrayson) on CodePen.light

Demo and Download

CSS Hotspots

Pure CSS image hostspots.
Made by Samiullah Khan

See the Pen yiGAl by Samiullah Khan (@samiullah1989) on CodePen.light

Demo and Download

Hotspots Experiments

HTML and CSS hotspots experiments.
Made by Gabin Aureche

See the Pen Hotspots experiments by Gabin Aureche (@Zhouzi) on CodePen.light

Demo and Download

Hotspot Experiments

HTML and CSS hotspot experiments.
Made by Phil Carter

See the Pen Hotspot Experiments by Phil Carter (@HandsomePhil) on CodePen.light

Demo and Download

SVG Hotspot/Play Button Animation

Hotspot/Play button animation. Prototype made with TimelineMax.js.
Made by Robert Bue

See the Pen SVG Hotspot/Play button animation by Robert Bue (@robbue) on CodePen.light

Demo and Download

Hotspot Button

Hotspot button in HTML and CSS.
Made by Shannon Smith

See the Pen jEpRVJ by Shannon Smith (@skodonne) on CodePen.light

Demo and Download