image map: show alternate image of areas on mouseover

Let's say I want to create an interactive group photo with two mouseover-effects:

a) show a tooltip above and
b) highlight the person / show an alternate image.

What I want to do is quite similar to this (look at Map #2) - I want the group photo to be all darkened when the page loads and highlight each person / show an alternate image (e.g. same photo but colored) on mouseover.

I already have the imagemap with tooltips (please note that the areas aren't quite exact here because I needed to use another image).

My code on FIDDLE

Solution

Here's a CodePen.

I was able to come up with a solution without using any JavaScript. The Map #2 example seemed to use <dl> and <dd> elements, which are pretty vague, but I went along with it. I think that you can do the same thing with <figure> and other more precise elements. You need to have a different "hover" image for each element that you hover on if you're not using areas, so that you can handle any overlapping areas in the rectangles.

HTML

<dl class="map">
  <dd>
    <figcaption>
      <p>Man 1</p>
    </figcaption>
  </dd>
  <dd>
    <figcaption>
      <p>Man 2</p>
    </figcaption>
  </dd>
  <dd>
    <figcaption>
      <p>Man 3</p>
    </figcaption>
  </dd>
  <dd>
    <figcaption>
      <p>Man 4</p>
    </figcaption>
  </dd>
  <dd>
    <figcaption>
      <p>Man 5</p>
    </figcaption>
  </dd>
</dl>

CSS

.map {
  display: block;
  margin: 50px 0px 0px 40px;
  padding: 0px;
  position: relative;
  background: url('map_silhouette_black.png');
  width: 600px;
  height: 400px;
}

.map dd {
  display: block;
  margin: 0px;
  padding: 0px;
  position: absolute;
  cursor: pointer;
}

.map dd figcaption {
  display: none;
  margin: -50px 0px 0px -60px;
  padding: 10px;
  position: relative;
  background: #333;
  color: #FFF;
  font: 14px sans-serif;
  text-align: center;
  border-radius: 100%;
  width: 120px;
  box-sizing: border-box;
}

.map dd figcaption:before {
  content: '';
  display: block;
  position: absolute;
  bottom: -15px;
  left: 50%;
  border: 10px #333 solid;
  border-left-color: transparent;
  border-bottom-color: transparent;
}

.map dd:hover figcaption {
  display: block;
}

.map dd:nth-child(1) {
  top: 20px;
  left: 20px;
  background-position: -20px -20px;
  width: 115px;
  height: 335px;
}

.map dd:nth-child(2) {
  top: 20px;
  left: 135px;
  background-position: -135px -20px;
  width: 115px;
  height: 345px;
}

.map dd:nth-child(3) {
  top: 5px;
  left: 250px;
  background-position: -250px -5px;
  width: 125px;
  height: 385px;
}

.map dd:nth-child(4) {
  top: 25px;
  left: 360px;
  background-position: -360px -25px;
  width: 120px;
  height: 350px;
}

.map dd:nth-child(5) {
  top: 25px;
  left: 470px;
  background-position: -470px -25px;
  width: 110px;
  height: 330px;
}

.map dd:nth-child(1):hover {
  background-image: url('map_silhouette_color1.png');
}

.map dd:nth-child(2):hover {
  background-image: url('map_silhouette_color2.png');
}

.map dd:nth-child(3):hover {
  background-image: url('map_silhouette_color3.png');
}

.map dd:nth-child(4):hover {
  background-image: url('map_silhouette_color4.png');
}

.map dd:nth-child(5):hover {
  background-image: url('map_silhouette_color5.png');
}