35+ Perfect CSS Hotspots Examples (Free Code + Demos)
Enjoy this 100% free and open source collection of HTML and CSS hotspot code examples. Hotspots are the small dots that point to certain areas in your content.
1. Image Hotspots CSS
Author: Vinicius Sueiro (vsueiro)
Links: Source Code / Demo
Created on: July 27, 2017
Made with: Pug, Sass, Babel
CSS Pre-processor: Sass
JS Pre-processor: Babel
HTML Pre-processor: Pug
2. Simple CSS Hotspots
Author: a charles (varcharles)
Links: Source Code / Demo
Created on: August 8, 2016
Made with: HTML, CSS, JS
3. Hotspot Labels - Email Html Css
Author: Jay (emailjay)
Links: Source Code / Demo
Created on: October 9, 2018
Made with: HTML
4. Simple Hotspots
Author: a charles (varcharles)
Links: Source Code / Demo
Created on: August 8, 2016
Made with: HTML, CSS, JS
5. Image Hotspots (Mobile Friendly)
Interactive hotspots - click or tap to see labels. Labels can be positioned so the hotspot is attached to any corner.
Author: Stephen Lee (abcretrograde)
Links: Source Code / Demo
Created on: June 3, 2018
Made with: HTML, SCSS, JS
Tags: label, labeled, graphic, tooltip, mobile
6. Interactive Web Accessibility Cheat Sheet
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. Disclaimer: this is not meant to be a thorough web accessibility an...Read More
Author: Alvaro Montoro (alvaromontoro)
Links: Source Code / Demo
Created on: August 28, 2018
Made with: HTML, CSS, JS
Tags: html, accessibility, a11y, cpc-teach-design, codepenchallenge
7. 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)
Author: Tomas Cordero (tcorderoIV)
Links: Source Code / Demo
Created on: November 1, 2017
Made with: HTML, SCSS, JS
Tags: flip, hotspots, card, gsap, greensock
8. Draggable Image Hotspots
Author: Michael Wilhelmsen (michaelwilhelmsen)
Links: Source Code / Demo
Created on: May 12, 2017
Made with: HTML, SCSS, JS
Tags: jquery-ui, image hotspots, jquery
9. Responsive Map Hotspots
Author: Dan Coolbeth (katartgraphics)
Links: Source Code / Demo
Created on: May 10, 2017
Made with: HTML, CSS, JS
10. JWS Hotspot Module
Author: Jose (Machinas) (jose_machinas)
Links: Source Code / Demo
Created on: May 23, 2016
Made with: HTML, SCSS, JS
11. Tracking Hotspots On A 360˙ Slider With CSS3D
Author: Craig Morey (pixelthing)
Links: Source Code / Demo
Created on: October 4, 2016
Made with: HTML, SCSS, JS
12. Untitled
Author: Armand (Armand)
Links: Source Code / Demo
Created on: September 28, 2016
Made with: HTML, JS
13. Animated ViewBox Data Visualization
Showing how animating the viewbox retains context and helps with revealing animation for data visualization. More in this CSS-Tricks article: https://css-tricks.com/interactive-data-visualization-animating-viewbox/
Author: Sarah Drasner (sdras)
Links: Source Code / Demo
Created on: June 5, 2016
Made with: HTML, SCSS, JS
Tags: animated viewbox, viewbox, greensock viewbox, data-visualization, viewbox data visualization
14. Image Hotspots
Author: Jon Stuebe (jonstuebe)
Links: Source Code / Demo
Created on: November 24, 2015
Made with: HTML, SCSS, JS
Tags: jquery, javascript, hotspots
15. Centered Background Image With Hot Spots
fully responsive! Also, animal.
Author: Adam (agrayson)
Links: Source Code / Demo
Created on: August 4, 2015
Made with: Pug, Sass, JS
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: hotspot, background, javascript, centered
16. Untitled
Author: Samiullah Khan (samiullah1989)
Links: Source Code / Demo
Created on: September 15, 2014
Made with: HTML, CSS
17. Hotspots Experiments
Author: Gabin Aureche (Zhouzi)
Links: Source Code / Demo
Created on: February 4, 2015
Made with: HTML, SCSS
Tags: hotspots, experiments, animation
18. Hotspot Experiments
Author: Phil Carter (HandsomePhil)
Links: Source Code / Demo
Created on: September 25, 2015
Made with: HTML, CSS
Tags: mhe, hover, hovercss, prototype
19. SVG Hotspot/Play Button Animation
Prototype I made for a new project. Animation done by GSAP
Author: Robert Bue (robbue)
Links: Source Code / Demo
Created on: September 1, 2015
Made with: HTML, SCSS, JS
Tags: tweenmax, timelinemax, svg, gsap, play
20. Untitled
Author: Shannon Smith (skodonne)
Links: Source Code / Demo
Created on: March 5, 2015
Made with: HTML, Less
21. CSS Hotspots With Pulse Effect
Pure CSS responsive hotspots with pulse effect. Pulse effect made with CSS animation and transform: scale().https://freefrontend.com/css-hotspots-with-pulse-effect/
Author: freefrontend.com (cssparadise)
Links: Source Code / Demo
Created on: October 2, 2019
Made with: HTML, CSS, JS
Tags: css, hotspots, pulse effect, animation, transform
22. Animating Highlight Hotspot
Animating Highlight Hotspot
Author: Uttam (uttammahat)
Links: Source Code / Demo
Created on: July 8, 2017
Made with: HTML, CSS
Tags: hotspot
23. Image Hotspots (Pure CSS)
Interactive hotspots - hover to see labels. Labels can be positioned so the hotspot is attached to any corner.
Author: will (will301)
Links: Source Code / Demo
Created on: May 15, 2019
Made with: HTML, SCSS
Tags: label, labeled, image, graphic, tooltip
24. Pulsating Hotspot UI Element
Animated hotspot indicator element with pure HTML & CSS. Uses CSS3 keyframe animation.
Author: Matthias Ott (matthiasott)
Links: Source Code / Demo
Created on: November 22, 2014
Made with: HTML, SCSS
Tags: keyframe, animation, ui, hotspot, css3
25. New Lightstep Hotspot V2
Animated hotspot indicator element with pure HTML & CSS. Uses CSS3 keyframe animation.
Author: Paul M DeVay (pdv)
Links: Source Code / Demo
Created on: April 21, 2020
Made with: HTML, SCSS
Tags: keyframe, animation, ui, hotspot, css3
26. Bootstrap Hotspots
Simple hotspots for Bootstrap 4
Author: Yoshi (Mosh)
Links: Source Code / Demo
Created on: April 19, 2019
Made with: HTML, CSS
Tags: bootstrap, bootstrap 4, hotspots
27. Pulsating Hotspot UI Element
Animated hotspot indicator element with pure HTML & CSS. Uses CSS3 keyframe animation.
Author: Matthias Ott (matthiasott)
Links: Source Code / Demo
Created on: November 22, 2014
Made with: HTML, SCSS
Tags: keyframe, animation, ui, hotspot, css3
28. Responsive Hotspots On The Map
fixed map markers or hotspots on the map. Hotspots in this example were placed on a satellite image.
Author: Joe (joekang)
Links: Source Code / Demo
Created on: August 17, 2015
Made with: HTML, SCSS, JS
Tags: hotspot, map, full-width, responsive, west coast
29. Responsive Image HotSpot - Pure CSS - V2
Author: Suresh (priyansuresh)
Links: Source Code / Demo
Created on: April 26, 2018
Made with: HTML, SCSS, JS
30. Expanding Responsive Hotspots
Author: hellokatili (hellokatili)
Links: Source Code / Demo
Created on: August 10, 2016
Made with: Haml, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: hotspot, expand, responsive
Hotspot Buttons
1. Hotspots Experiments
Author: Gabin Aureche (Zhouzi)
Links: Source Code / Demo
Created on: February 4, 2015
Made with: HTML, SCSS
Tags: hotspots, experiments, animation
2. Hotspot Experiments
Author: Phil Carter (HandsomePhil)
Links: Source Code / Demo
Created on: September 25, 2015
Made with: HTML, CSS
Tags: mhe, hover, hovercss, prototype
3. SVG Hotspot/Play Button Animation
Prototype I made for a new project. Animation done by GSAP
Author: Robert Bue (robbue)
Links: Source Code / Demo
Created on: September 1, 2015
Made with: HTML, SCSS, JS
Tags: tweenmax, timelinemax, svg, gsap, play
4. Untitled
Author: Shannon Smith (skodonne)
Links: Source Code / Demo
Created on: March 5, 2015
Made with: HTML, Less
Hotspots
1. Image Hotspots CSS
Author: Vinicius Sueiro (vsueiro)
Links: Source Code / Demo
Created on: July 27, 2017
Made with: Pug, Sass, Babel
CSS Pre-processor: Sass
JS Pre-processor: Babel
HTML Pre-processor: Pug
2. Simple CSS Hotspots
Author: a charles (varcharles)
Links: Source Code / Demo
Created on: August 8, 2016
Made with: HTML, CSS, JS
3. Hotspot Labels - Email Html Css
Author: Jay (emailjay)
Links: Source Code / Demo
Created on: October 9, 2018
Made with: HTML
4. Simple Hotspots
Author: a charles (varcharles)
Links: Source Code / Demo
Created on: August 8, 2016
Made with: HTML, CSS, JS
5. Image Hotspots (Mobile Friendly)
Interactive hotspots - click or tap to see labels. Labels can be positioned so the hotspot is attached to any corner.
Author: Stephen Lee (abcretrograde)
Links: Source Code / Demo
Created on: June 3, 2018
Made with: HTML, SCSS, JS
Tags: label, labeled, graphic, tooltip, mobile
6. Interactive Web Accessibility Cheat Sheet
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. Disclaimer: this is not meant to be a thorough web accessibility an...Read More
Author: Alvaro Montoro (alvaromontoro)
Links: Source Code / Demo
Created on: August 28, 2018
Made with: HTML, CSS, JS
Tags: html, accessibility, a11y, cpc-teach-design, codepenchallenge
7. 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)
Author: Tomas Cordero (tcorderoIV)
Links: Source Code / Demo
Created on: November 1, 2017
Made with: HTML, SCSS, JS
Tags: flip, hotspots, card, gsap, greensock
8. Draggable Image Hotspots
Author: Michael Wilhelmsen (michaelwilhelmsen)
Links: Source Code / Demo
Created on: May 12, 2017
Made with: HTML, SCSS, JS
Tags: jquery-ui, image hotspots, jquery
9. Responsive Map Hotspots
Author: Dan Coolbeth (katartgraphics)
Links: Source Code / Demo
Created on: May 10, 2017
Made with: HTML, CSS, JS
10. JWS Hotspot Module
Author: Jose (Machinas) (jose_machinas)
Links: Source Code / Demo
Created on: May 23, 2016
Made with: HTML, SCSS, JS
11. Tracking Hotspots On A 360˙ Slider With CSS3D
Author: Craig Morey (pixelthing)
Links: Source Code / Demo
Created on: October 4, 2016
Made with: HTML, SCSS, JS
12. Untitled
Author: Armand (Armand)
Links: Source Code / Demo
Created on: September 28, 2016
Made with: HTML, JS
13. Animated ViewBox Data Visualization
Showing how animating the viewbox retains context and helps with revealing animation for data visualization. More in this CSS-Tricks article: https://css-tricks.com/interactive-data-visualization-animating-viewbox/
Author: Sarah Drasner (sdras)
Links: Source Code / Demo
Created on: June 5, 2016
Made with: HTML, SCSS, JS
Tags: animated viewbox, viewbox, greensock viewbox, data-visualization, viewbox data visualization
14. Image Hotspots
Author: Jon Stuebe (jonstuebe)
Links: Source Code / Demo
Created on: November 24, 2015
Made with: HTML, SCSS, JS
Tags: jquery, javascript, hotspots
15. Centered Background Image With Hot Spots
fully responsive! Also, animal.
Author: Adam (agrayson)
Links: Source Code / Demo
Created on: August 4, 2015
Made with: Pug, Sass, JS
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: hotspot, background, javascript, centered
16. Untitled
Author: Samiullah Khan (samiullah1989)
Links: Source Code / Demo
Created on: September 15, 2014
Made with: HTML, CSS
More Awesome Lists:
Share: