title: CSS Different text box over image when hover at different different location
body: <p>I need to make an image of a map when a mouse is hover at certain location, a text box will appear on the map. When a mouse is hover at another location, a different text box will have to appear at a different part of the map.</p>
  
  <pre><code>---------------------------
  | box 1             box 2 |
  |           MAP           |
  |                         |
  | hover2           hover1 |
  ---------------------------
  </code></pre>
  
  <p>Say when the mouse hover over hover1, box 1 will apear.  When the mouse hover over hover2, box 2 will appear.</p>
  
  <p>I was able to user css to do hover1 -> box1, but am unable to do the hover2 -> box 2.  Will I be able to achieve the result with CSS alone?</p>
  
  <p>html:</p>
  
  <pre><code>&lt;h1&gt;World Map&lt;/h1&gt;
  &lt;div class="map"&gt;
    &lt;img src="assets/strangemap.png" usemap="#testing"&gt;
    &lt;div&gt;
      &lt;map name="testing"&gt;
        &lt;area shape="rect" coords="554,275,600,316" class="overlay"&gt;
      &lt;/map&gt;
      &lt;span class="text-content-left"&gt;&lt;span&gt;Midgaard&lt;/span&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.map {
    display: inline-block;
    position: relative;
    border-top: 3px solid $gray-lighter;
    border-left: 3px solid $gray-lighter;
    border-bottom: 3px solid $gray-light;
    border-right: 3px solid $gray-light;
  }
  
  .overlay {
    cursor: pointer;
  }
  
  span.text-content-left {
    background: rgba(0,0,0,0.5);
    color: white;
    display: table;
    height: 50px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100px;
    opacity: 0;
    border: 2px solid $gray-light;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
  }
  
  span.text-content-left span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
  
  .map map:hover + span.text-content-left {
    opacity: 1;
  }
  </code></pre>