Edit in JSFiddle

<div class="container">
  <a class="hotspot colonel" href="#"></a>
  <a class="hotspot hitgirl" href="#"></a>
  <a class="hotspot kickass" href="#"></a>
  <a class="hotspot mf" href="#"></a>
  <img src="https://thepracticaldev.s3.amazonaws.com/i/w5l569wg06kb2ct3kudp.jpg" alt="">
</div>

body {
  margin: 0;
}

img {
  width: 100%;
}

.container {
  position: relative;
}

.container a {
  position: absolute;
  display: block;
}

.container a:hover {
  background-color: rgba(0,0,0,0.5);
}

.container .colonel {
  left: 2%;
  bottom: 0;
  width: 24%;
  height: 88%;
}

.container .hitgirl {
  left: 22%;
  bottom: 0;
  width: 24%;
  height: 88%;
}

.container .kickass {
  left: 46%;
  bottom: 0;
  width: 30%;
  height: 100%;
}

.container .mf {
  right: 10%;
  bottom: 0;
  width: 20%;
  height: 94%;
}