Responsive Image Hotspots Code with Demo

Responsive Image Hotspots Code with Demo
Code Snippet:Expanding responsive hotspots
Author: hellokatili
Published: January 18, 2024
Last Updated: January 22, 2024
Downloads: 1,021
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X