title: How to overlay a transparent PNG over an image /when rolling over some other item/
body: <p>I have a webpage with a content image. On this image, I want to highlight a few different items, triggered by the user rolling over the corresponding item in the text on the same page.</p>
  
  <p>I have transparent PNGs that I can use as image overlays to accomplish the highlighting. I know how to make an overlay appear STATICALLY by using span tags (as explained <a href="http://www.webdesignerwall.com/tutorials/css-decorative-gallery/" rel="nofollow noreferrer" title="here">here</a>). </p>
  
  <p>But, I am at a loss how to display a specific overlay ONLY WHEN the user is rolling over some particular piece of text. To visualize what I am trying to do, imagine an image that shows a London Tube map. I want a yellow highlight to appear over a specific station when the pointer is over the name of that station in the text.</p>
  
  <p>Any suggestions, examples, or related tutorials would be much appreciated!</p>
  
  <ul>
  <li>Matt</li>
  </ul>