Top 21 CSS Hotspots

HOTSPOTS

HTML and CSS hotspots with modal window.

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

Author

• Jack
• November 27, 2018

Links

• demo and code

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.

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.

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.

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.

IMAGE HOTSPOTS

Image hotspots with gallery.

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

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.

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.

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.

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.

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.

Hotspots In 3D

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

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

SIMPLE HOTSPOTS

Simple hotspots with HTML, CSS and JS.

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

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.

Image Hotspots

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

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.

CSS Hotspots

Pure CSS image hostspots.
Made by Samiullah Khan

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

Hotspots Experiments

HTML and CSS hotspots experiments.
Made by Gabin Aureche

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

Hotspot Experiments

HTML and CSS hotspot experiments.
Made by Phil Carter

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

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.

Hotspot Button

Hotspot button in HTML and CSS.
Made by Shannon Smith

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