<div class="image">
    <div class="contain">
      <a class="hotspot" data-left="10" data-top="34" data-text="Ipsum Fringilla Aenean Bibendum Purus">Navigation System</a>
      <a class="hotspot" data-left="17" data-top="50" data-text="Dolor Risus Bibendum Vestibulum Ligula">Autoshift</a>
      <a class="hotspot" data-left="45" data-top="46" data-text="Dapibus Elit Nullam Sit Ligula">Premium Leather</a>
      <a class="hotspot" data-left="71" data-top="32" data-text="Tellus Nullam Pharetra Ligula Ipsum">Rear Seating</a>
      <a class="hotspot" data-left="30" data-top="79" data-text="Risus Quam Malesuada Justo Lorem">Seat Controls</a>
      <div class="hotspots-label"></div>
    </div>
  </div>

@import "bourbon";
@import "neat";

// media queries
$query-x-sm: new-breakpoint(max-width 375px 12);
$query-min-x-sm: new-breakpoint(min-width 375px 12);
$query-sm: new-breakpoint(max-width 580px 12);
$query-min-sm: new-breakpoint(min-width 580px 12);
$query-sm-md: new-breakpoint(max-width 780px 12);
$query-md: new-breakpoint(max-width 960px 12);
$query-min-md: new-breakpoint(min-width 960px 12);
$query-ipad: new-breakpoint(max-width 1024px 12);
$query-min-lg: new-breakpoint(min-width 1600px 12);
$query-lg: new-breakpoint(max-width 1600px 12);
$query-x-lg: new-breakpoint(max-width 2560px 12);

%open-icon {
  content: "";
  display: block;
  border: 1px solid #fff;
  background-color: transparent;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  position: absolute;
  left: 5px;
  top: 5px;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOC4xLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxMS42IDExLjYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDExLjYgMTEuNiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMC41NjI1IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSI1LjgiIHkxPSIxMS42IiB4Mj0iNS44IiB5Mj0iMCIvPg0KPGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjAuNTYyNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iMCIgeTE9IjUuOCIgeDI9IjExLjYiIHkyPSI1LjgiLz4NCjwvc3ZnPg0K");
  background-size: 75%;
  background-position: center center;
  background-repeat: no-repeat;
}

$hotspot-easing: cubic-bezier(.2,.5,.34,1);
.hotspots-label {
  position: absolute;
  bottom: 20px;
  left: 50%;
  text-align: center;
  color: #fff;
  font-size: 16px;
  transform: translateX(-50%);
  -webkit-font-smoothing: antialiased;
  opacity: 0;
  visibility: hidden;
  transition: opacity 350ms $hotspot-easing;
  width: 100%;
  
  &:before {
    @extend %open-icon;
    display: none;
  }
  
  @include media($query-sm) {
    width: 100%;
    height: 100%;
    padding: 50px 40px;
    background-color: rgba(0, 0, 0, .35);
    
    strong {
      display: block;
      margin-bottom: 10px;
    }
    
    span {
      display: block;
    }
    
    &:before {
      display: block;
      top: 25px;
      left: auto;
      right: 4px;
      transform: rotate(45deg);
      cursor: pointer;
    }
  }
  
  &.is-visible {
    opacity: 1;
    visibility: visible;
  }
}

.hotspot {
  padding: 20px;
  height: 40px;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, .45);
  color: #fff;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  line-height: 40px;
  border-radius: 20px;
  font-size: 15px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  opacity: 0;
  width: 0;
  transition: opacity 650ms ease-in, width 350ms linear;
  text-indent: -9999em;
  user-select: none;
  
  &.is-visible {
    opacity: 1;
  }
  
  &.is-active {
    padding: 0 20px 0 50px;
    text-indent: 0;
    width: auto;
    
    &:before {
      transform: rotate(45deg);
    }
  }

  &:before {
    @extend %open-icon;
    transition: transform 150ms $hotspot-easing;
  }
  
  @include media($query-md) {
    
    height: 30px;
    line-height: 30px;
    font-size: 13px;
    padding: 15px;
    
    &.is-active {
      padding: 0 15px 0 35px;
      text-indent: 0;
      width: auto;
    }
    
    &:before {
      top: 2px;
      left: 2px;
      width: 25px;
      height: 25px;
    }
    
  }
  
  @include media($query-sm) {
    
    padding: 12px;
    height: 25px;
    line-height: 25px;
    font-size: 12px;
    
    &.is-active {
      padding: 0 10px 0 30px;
      text-indent: 0;
      width: auto;
    }
    
    &:before {
      width: 20px;
      height: 20px;
    }
    
  }
}

.image {
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
  
  &:before {
    content: "";
    display: block;
    width: 100%;
    padding-top: (840 / 1200) * 100%;
  }
  
  .contain {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/6444/interior-01-RHD.jpg);
    background-size: cover;
  }
  
}

$('.hotspot').each(function(){
  
  var $this = $(this),
      top = $this.data('top'),
      left = $this.data('left');
  
  $this.css({
    top: top + "%",
    left: left + "%"
  })
  .addClass('is-visible');
  
});

$(".hotspots-label").on('click', function(e){
  $(this).removeClass('is-visible');
  $(this).parents('.image').find('.hotspot').removeClass('is-active');
  e.preventDefault();
});

$('.hotspot').on('click', function(e){
  
  var text = $(this).data('text');
  
  if(!$(this).hasClass('is-active'))
  {
    $(this).parents('.image').find('.hotspot').removeClass('is-active');
    $(this).addClass('is-active');
    $(this).parents('.image').find('.hotspots-label').html( '<strong>' + $(this).text() + '</strong> <span>' + text + '</span>' ).addClass('is-visible');
  }
  else
  {
    $(this).removeClass('is-active');
    $(this).parents('.image').find('.hotspots-label').html( '<strong>' + $(this).text() + '</strong> <span>' + text + '</span>' ).removeClass('is-visible');  
  }
  
  e.preventDefault();
});