This code facilitates the creation of responsive image hotspots on a webpage. It works by positioning and styling hotspots on an image to display additional information when clicked.
The “hotspot” class is essential for this purpose, allowing users to interact with and reveal hidden content. It’s helpful for enhancing image-based content with interactive annotations.
It’s ideal for product pages to highlight key features, educational websites for informative illustrations, and travel sites to showcase points of interest.
How to Create Responsive Image Hotspots
1. First of all, load the Normalize CSS and jQuery by adding the following CDN links into the head tag of your HTML document.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
2. Inside the <body> of your HTML, create a container div where your image and hotspots will reside. Copy and paste this code for each hotspot, adjusting the positioning and content as needed.
<div class='container'>
<div class='hotspot open' style='top: 20%;left: 10%;'>
<div class='icon'>+</div>
<div class='content'>
<h4>Lorem ipsum</h4>
<p>diam consetetur takimata velit magna magna</p>
<a class='btn' href='/'>
Button
</a>
</div>
</div>
<div class='hotspot' style='top: 5%; right: 10%;'>
<div class='icon'>+</div>
<div class='content'>
<h4>Eros uns eos sind rebum</h4>
<p>Clita sanctus eirmod eros aliquip. Clita Lorem dolores diam</p>
<a class='btn'>
velit dolor
</a>
</div>
</div>
<div class='hotspot' style='bottom: 20%;left: 60%;'>
<div class='icon'>+</div>
<div class='content'>
<h4>Eros uns eos sind rebum</h4>
<p>Clita sanctus eirmod eros aliquip. Clita Lorem dolores diam</p>
<a class='btn' href='/'>
Button
</a>
</div>
</div>
<div class='hotspot' style='bottom: 10%;right: 10%;'>
<div class='icon'>+</div>
<div class='content'>
<h4>Eros uns eos sind rebum</h4>
<p>Clita sanctus eirmod eros aliquip. Clita Lorem dolores diam</p>
<a class='btn' href='/'>
Button
</a>
</div>
</div>
</div>
3. In your styles.css file, include the provided CSS code. This code defines the hotspot styles and positioning. Customize it to match your design and hotspot size.
.container {
position: relative;
z-index: 99;
display: block;
padding-bottom: 56.25%;
background-image: url("https://unsplash.it/1600/900/?image=999") !important;
background-repeat: no-repeat;
background-size: cover;
}
.hotspot {
position: absolute;
display: block;
width: 30px;
height: 30px;
overflow: hidden;
border-radius: 50% 50%;
background-color: #994e77;
color: white;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
backface-visibilty: hidden;
transition: all 0.3s ease 0.1, border-radius 0.1s ease 0.2;
}
.hotspot.open {
border-radius: 0 0;
width: 300px;
height: 250px;
max-height: 300px;
transition: all 0.3s ease, border-radius 0.1s ease;
}
.hotspot.open .icon {
transform: rotate(45deg);
}
.hotspot.open .content {
opacity: 1;
transition: opacity 0.2s ease 0.2s;
}
.hotspot .icon {
position: absolute;
display: block;
width: 30px;
height: 30px;
overflow: hidden;
font-size: 20px;
line-height: 30px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
.hotspot .content {
position: absolute;
top: 30px;
left: 30px;
margin: 0;
overflow: auto;
height: 240px;
width: 240px;
opacity: 0;
transition: opacity 0.1s ease 0s;
}
.hotspot .content h4 {
margin: 0 0 10px 0;
}
.hotspot .content p {
margin: 0 0 30px 0;
}
.hotspot .content .btn {
padding: 10px 20px;
line-height: 20px;
background-color: white;
color: black;
text-decoration: none;
box-shadow: 0px 0px 5px #422133;
}
.hotspot.left-top .icon {
top: 0;
left: 0;
}
.hotspot.right-top .icon {
left: auto;
top: 0;
right: 0;
}
.hotspot.left-bottom .icon {
left: 0;
bottom: 0;
}
.hotspot.right-bottom .icon {
bottom: 0;
right: 0;
}
4. Finally, include the following JavaScript code to your project. It enables the opening and closing of hotspots on click and positions them correctly on the image.
$('.hotspot .icon').click(function() {
var $parent = $(this).parent();
$parent.toggleClass('open');
$('.hotspot.open').not($parent).removeClass('open');
});
$('.hotspot').each(function(e, i) {
var $this = $(this);
var css = detectPosition($this, e);
$(this).addClass(css.css).attr('style', css.styles)
});
function detectPosition($elem, ind) {
var container = $('.container'),
height = container.innerHeight(),
width = container.innerWidth(),
p = $elem.position(),
x = p.left,
y = p.top,
w = $elem.width(),
h = $elem.height(),
cssClass = [],
style = '';
if (x >= width / 2) { // Right half
cssClass.push('right');
style += 'right:' + ((width - x - w) / width * 100) + '%;left: auto;';
} else { // Left half
cssClass.push('left');
style += 'left:' + (x / width * 100) + '%;right: auto;';
}
if (y >= height / 2) { // Lower half
cssClass.push('bottom');
style += 'bottom:' + ((height - y - h) / height * 100) + '%;top: auto;';
} else { // Upper half
cssClass.push('top');
style += 'top:' + (y / height * 100) + '%;bottom: auto;';
}
return {
css: cssClass.join('-'),
styles: style
};
}
That’s all! hopefully, you have successfully created Responsive Image Hotspots on your website. If you have any questions or suggestions, feel free to comment below.
Similar Code Snippets:
Circular Scroll Indicator Using Pure CSS
Neumorphic Buttons with Icons Using CSS
Drawing with Text Using HTML5 Canvas
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.