<div class="product">
  <img src="https://n.nordstrommedia.com/ImageGallery/store/product/Zoom/16/_6507496.jpg?format=jpeg&trim=color&trimcolor=C0C0BE&w=780&h=838&quality=70" alt="Timberland Wodehouse Lost History Boot (Men)">

  <div class="msdw-hotspot-wrapper">
    <a class="msdw-hotspot" href="#">

      <svg class="msdw-hotspot-icon" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="#1abc9c" viewBox="0 0 30 30"><path d="M15.075 0c-8.284 0-15 6.716-15 15s6.716 15 15 15 15-6.716 15-15-6.716-15-15-15zM23 16h-7v7.31c0 .553-.447 1-1 1s-1-.447-1-1V16H7c-.553 0-1-.447-1-1s.447-1 1-1h7V7.31c0-.553.447-1 1-1s1 .447 1 1V14h7c.553 0 1 .447 1 1s-.447 1-1 1z"/></svg>

      <div class="msdw-hotspot-info">
        <div class="msdw-hotspot-slides">
          <img src="https://n.nordstrommedia.com/ImageGallery/store/product/Zoom/1/_8486081.jpg?crop=pad&pad_color=FFF&format=jpeg&trim=color&trimcolor=FFF&w=750&h=500" alt="Boot">
          <img src="https://n.nordstrommedia.com/ImageGallery/store/product/Zoom/16/_8486056.jpg?crop=pad&pad_color=FFF&format=jpeg&trim=color&trimcolor=FFF&w=850&h=500" alt="Boot">
          <img src="https://n.nordstrommedia.com/ImageGallery/store/product/Zoom/4/_8486044.jpg?crop=pad&pad_color=FFF&format=jpeg&trim=color&trimcolor=FFF&w=1000&h=500" alt="Boot">
        </div>

        <div class="msdw-hotspot-caption">
          <h4>Wodehouse Lost History Boot</h4>
          <p>Timberland Wodehouse Lost History Boot (Men)</p>
        </div>
      </div>

    </a>
  </div>
</div>

@import "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css";

@keyframes animBlock {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    transform: scale(.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

html { background-color: #C0C0BE; }
body { height: 100%; max-width: 1000px; margin: 1em auto; }
a { text-decoration: none; color: #000; }
h4 { margin: 0 0 15px; }
img { max-width: 100%; height: auto; }

.product { position: relative; }

.msdw-hotspot-wrapper {
  position: absolute;
  bottom: 40px;
  left: 290px;
}

.msdw-hotspot {
  display: block;
  width: 30px;
  height: 30px;
  overflow: hidden;
  //-webkit-user-select: none;
  //-webkit-touch-callout: none;   
  //-webkit-transform-style: preserve-3d;
  //-webkit-backface-visibility: hidden;
  
  &:active,
  &:hover,
  &:focus {
    width: auto;
    height: auto;
    background-color: rgba(0,0,0,.01); // IE9
    
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-user-select: none;
    -webkit-touch-callout: none; // only to disable context menu on long press
    
    .msdw-hotspot-info {
      animation: animBlock .15s;
    }
  }
}

.msdw-hotspot-icon {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.msdw-hotspot-info {
  position: relative;
  padding: 0 0 50px 200px;
  width: 300px;
  text-align: center;
  
  &::before {
    content: "";
    width: 250px;
    height: 1px;
    position: absolute;
    bottom: 120px;
    left: 0;
    background-color: #1abc9c;
    z-index: 1;
    transform: rotate(-45deg);
  }
  
  img {
    display: block;
    padding: 15px 0;
    background-color: #fff;
  }
}

.ie9 .msdw-hotspot-info,
.ie10 .msdw-hotspot-info {
  background: transparent url(IEsucks.gif);
}

.msdw-hotspot-caption {
  padding: 5px 70px;
  line-height: 1.25;
  background-color: #fff;
  
  p {
    font-size: 14px;
  }
}

.slick-dotted.slick-slider {
  margin-bottom: 0;
  background-color: #fff;
}

.slick-slide { width: 300px; outline: 0; }

.slick-dots {
  position: relative;
  bottom: 0;
  
  li {
    margin: 15px 5px;
    
    button {
      height: 10px;
      background-color: #efefef;
      
      &::before {
        content: "";
        font-size: 14px;
      }
    }
  }
  
  li.slick-active button {
    background-color: #1dbc9c;
  }
}

$('.msdw-hotspot-slides').slick({
  arrows: false,
  dots: true
});

// http://stackoverflow.com/questions/2851663/how-do-i-simulate-a-hover-with-a-touch-in-touch-enabled-browsers
document.addEventListener("touchstart", function(){}, true);