svg-mask-map-html.html

<!-- NOTE: not valid markup, just to show DOM structure -->

<!-- 01. full bleed background & overlay -->
<section class="background">
  <div class="overlay"></div>

  <svg>

    <!-- 02. transparency data/mask -->
    <defs>
      <mask id="mask">
        <image href="/transparancy-mask.jpg"></image>
      </mask>
    </defs>

    <!-- 03. both color data images -->
    <g mask="url(#mask)">
      <image href="/faded-out-mounts.jpg"/>
      <image href="/default-mounts.jpg"/>
    </g>

    <!-- 04. highlighted image of each mount -->
    <g>
      <image href="/mount-0-hightlight.png"></image>
      <image href="/mount-1-hightlight.png"></image>
      <image href="/mount-2-hightlight.png"></image>
      <image href="/mount-3-hightlight.png"></image>
    </g>

    <!-- 05. hoverable regions -->
    <g>
      <path d="{path data for mount 0}"></path>
      <path d="{path data for mount 1}"></path>
      <path d="{path data for mount 2}"></path>
      <path d="{path data for mount 3}"></path>
    </g>

  </svg>
</section>