Collection of hand-picked free HTML and CSS hotspot code examples from codepen and other resources. Update of February 2019 collection. 5 new items.
Table of Contents
Related Articles
Hotspots
Links
Made with
- HTML / CSS (SCSS)
About a code
CSS Explanation of Different Points of the Image
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Cat Tips
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Interactive Image Hotspot
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS Hotspots with Pulse Effect
Pure CSS responsive hotspots with pulse effect. Pulse effect made with CSS animation and transform: scale().
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Hotspots
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Hotspots
HTML and CSS hotspots with modal window.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Hotspot Labels
Hotspot labels for email in HTML and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS / JavaScript
About the code
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.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JavaScript
About the code
Image Hotspots Mobile Friendly
Interactive hotspots - click or tap to see labels. Labels can be positioned so the hotspot is attached to any corner.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: jquery.js
Links
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).
Links
Made with
- HTML/Pug
- CSS/Sass (font-awesome.css)
- JavaScript/Babel
About the code
Image Hotspots
Image hotspots with gallery.
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
Draggable Image Hotspots
Click on the image to create hotspots. Drag to change positions.
Made by Michael Wilhelmsen
May 16, 2017
Responsive Map Hotspots
Responsive map hotspots in HTML, CSS and JavaScript.
Made by Dan Coolbeth
May 10, 2017
JWS Hotspot Module
Hotspot module with HTML, CSS and JavaScript.
Made by Jose (Machinas)
March 16, 2017
Tracking Hotspots
Tracking hotspots on a 360˙ slider with CSS 3D.
Made by Craig Morey
October 25, 2016
Hotspots In 3D
Interactive hotspots in 3D with HTML and JavaScript.
Made by Armand
October 6, 2016
Links
Made with
- HTML
- CSS
- JavaScript
About the code
Simple Hotspots
Simple hotspots with HTML, CSS and JS.
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
Image Hotspots
HTML, CSS and JavaScript image hotspots.
Made by Jon Stuebe
December 30, 2015
Centered Background Image With Hot Spots
Fully responsive! Also, animal.
Made by Adam Grayson
September 2, 2015
CSS Hotspots
Pure CSS image hostspots.
Made by Samiullah Khan
September 15, 2014
Hotspot Buttons
Hotspots Experiments
HTML and CSS hotspots experiments.
Made by Gabin Aureche
September 27, 2016
Hotspot Experiments
HTML and CSS hotspot experiments.
Made by Phil Carter
September 15, 2015
SVG Hotspot/Play Button Animation
Hotspot/Play button animation. Prototype made with TimelineMax.js.
Made by Robert Bue
September 1, 2015
Hotspot Button
Hotspot button in HTML and CSS.
Made by Shannon Smith
March 6, 2015