CSS Different text box over image when hover at different different location
<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>