HOTSPOTS
HTML and CSS hotspots with modal window.
See the Pen Hotspots for Email (CSS Only) by Jack (@jack-taylor89) on CodePen.
Links
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.
Links
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.
Links
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.
Links
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.
Links
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.
Links
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.
[su_button url=”https://codepen.io/ispal/pen/VWPJRd ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]
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.
[su_button url=”https://codepen.io/michaelwilhelmsen/pen/gWzRWw ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]
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.
[su_button url=”https://codepen.io/katartgraphics/pen/OmQZEe ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]
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.
[su_button url=”https://codepen.io/jose_machinas/pen/oxKeoV ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]
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.
[su_button url=”https://codepen.io/pixelthing/pen/kkxpqo ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]
Hotspots In 3D
Interactive hotspots in 3D with HTML and JavaScript.
Made by Armand
See the Pen LRLoOo by Armand (@Armand) on CodePen.
[su_button url=”https://codepen.io/Armand/pen/LRLoOo ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]
SIMPLE HOTSPOTS
Simple hotspots with HTML, CSS and JS.
See the Pen Simple Hotspots by a charles (@varcharles) on CodePen.
Links
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.
[su_button url=”https://codepen.io/sdras/pen/dXoLEJ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]
Image Hotspots
See the Pen image hotspots by Jon Stuebe (@jonstuebe) on CodePen.
Made with
- Html / CSS / JavaScript
[su_button url=”https://codepen.io/jonstuebe/pen/PPvBGZ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]
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.
[su_button url=”https://codepen.io/agrayson/pen/vObLmZ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]
CSS Hotspots
Pure CSS image hostspots.
Made by Samiullah Khan
See the Pen yiGAl by Samiullah Khan (@samiullah1989) on CodePen.
[su_button url=”https://codepen.io/samiullah1989/pen/yiGAl ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]
Hotspots Experiments
HTML and CSS hotspots experiments.
Made by Gabin Aureche
See the Pen Hotspots experiments by Gabin Aureche (@Zhouzi) on CodePen.
[su_button url=”https://codepen.io/Zhouzi/pen/OPxYEq ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]
Hotspot Experiments
HTML and CSS hotspot experiments.
Made by Phil Carter
See the Pen Hotspot Experiments by Phil Carter (@HandsomePhil) on CodePen.
[su_button url=”https://codepen.io/HandsomePhil/pen/MajNGp ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]
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.
[su_button url=”https://codepen.io/robbue/pen/QjWOyQ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]
Hotspot Button
Hotspot button in HTML and CSS.
Made by Shannon Smith
See the Pen jEpRVJ by Shannon Smith (@skodonne) on CodePen.
[su_button url=”https://codepen.io/skodonne/pen/jEpRVJ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]
