CSS Zones mapping

index.html

<!-- The whole mapping zone -->
<section class="frame">  
  
  <!-- Our mapping zones -->
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>

  <!-- The background -->
  <div></div>

</section>

mapping.css

/* Demo style */

.demo-frame{
  width: 300px;
  height: 300px;
  position: relative; /* Required */
  border: 2px solid #fff;
}

.demo-frame div{ 
  width: 100%;
  height: 100%;
  position: absolute; /* Required */ 
  top: 0;
  z-index: 0;
}

.demo-frame span{
  width: 100px;
  height: 100px;
  z-index: 1;
  display: block;
  background: transparent;
  float: left;
  position: relative; /* Required */
}
.demo-frame span:nth-child(1):hover ~ div{ 
  background: red;
}
.demo-frame span:nth-child(2):hover ~ div{ 
  background: orange; 
}
.demo-frame span:nth-child(3):hover ~ div{ 
  background: blue; 
}
.demo-frame span:nth-child(4):hover ~ div{  
  background: green; 
}
.demo-frame span:nth-child(5):hover ~ div{ 
  background: yellow; 
}
.demo-frame span:nth-child(6):hover ~ div{ 
  background: peru; 
}
.demo-frame span:nth-child(7):hover ~ div{   
  background: gold;
}
.demo-frame span:nth-child(8):hover ~ div{   
  background: teal; 
}
.demo-frame span:nth-child(9):hover ~ div{ 
  background: tomato; 
}