<!--
emmet
.image-container>img.look(>button[type=button].look__bullet-button.absolute-possitioned)
-->
<div class="image-container">
  <img src="//c1.staticflickr.com/1/271/19906672192_496ae8b050_k.jpg" alt="" class="look">
  
  <button type="button" class="look__hotspot absolute-possitioned" style="top:25%; left:33%;"></button>
  <button type="button" class="look__hotspot absolute-possitioned" style="top:50%; left:55%;"></button>
  <button type="button" class="look__hotspot absolute-possitioned" style="top:70%; left:42%;"></button>
  
</div>

$button-side: 24px;
$outer-circle-side:40px;

.look__hotspot {
  width: $button-side;
  height: $button-side;
  display: block;
  background-color: rgba(0,0,0,0.5);
  border-radius: 50%;
  
  box-sizing: border-box;
  border: 5px solid white;
  
  &:hover {
    &::before {
      border-color: white;
    }
  }
  
  /* outer */
  &::before {
    content:'';
    display: block;
    box-sizing: border-box;
    border: 8px solid rgba(0,0,0,0.5);
    border-radius: 50%;
    width: $outer-circle-side;
    height: $outer-circle-side;
    position: absolute;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
    top: 50%;
    left: 50%;
    margin-left: -$outer-circle-side/2;
    margin-top: -$outer-circle-side/2;
    transition: border 0.2s ease-out;
    transition-delay: 0.2s;
  }
  
  /* hit area */
  &::after {
    $hit-circle-side: $outer-circle-side*1.5;
    content:'';
    display: block;
    box-sizing: border-box;
    border: $outer-circle-side*0.25 solid rgba(0,0,0,0.01);
    border-radius: 50%;
    width: $hit-circle-side;
    height: $hit-circle-side;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -$hit-circle-side/2;
    margin-top: -$hit-circle-side/2;
  }
}

/**
 * ignore this below, this is just setup
 */

body {
  background: #f1f1f1;
  padding: 10px;
}

.look {
  max-width: 100%;
  max-height: 700px;
}

.image-container {
  position: relative;
  display: inline-block;
}

.absolute-possitioned {
  position: absolute;
  z-index: 1;
}