title: Javascript mouseover images
body: <p>im currently working on a section of a site in which there is a grid 9 images.  I'd like to have it so when your mouse moves over one of the images.  A div appears above the image containing some text.  any suggestions on how one would go about doing this? thanks!</p>
  
  <p>heres what a part of the grid looks like</p>
  
  <pre><code>&lt;div class = 'picture-container'&gt;
              &lt;div class = 'picture-wrapper' id = 'top-left'&gt;
                  &lt;img src = 'ds-map.png' height = '100%' width = '100%'&gt;
              &lt;/div&gt;
              &lt;div class = 'picture-wrapper' id = 'top-right'&gt;
                  &lt;img src = 'ds-map.png' height = '100%' width = '100%'&gt;
              &lt;/div&gt;
              &lt;div class = 'picture-wrapper' id = 'top-center'&gt;
                  &lt;img src = 'ds-map.png' height = '100%' width = '100%'&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>