title: On mouseover, changing an image's opacity and overlaying text
body: <p>I want to drop the opacity and overlay text on a thumbnail image when I mouse over it. I have several ideas about how to do it, but I'm fairly certain they're inefficient and clumsy.</p>
  
  <ol>
  <li>Make a duplicate image in Photoshop with the text overlay and reduced opacity. Swap the original out for the duplicate on mouseover.</li>
  <li>Use CSS to drop the opacity on mouseover. Use Javascript to toggle visibility of a div containing the overlay text.</li>
  </ol>
  
  <p>The problem I see with 1 is it seems like an unnecessary use of space and bandwidth, and will cause slow load times. With 2, it seems like I'd have to hard-code in the location of each div, which would be a pain to maintain and update. I know this is a somewhat general question, but I'm at a loss about how to go about this. How can I do this relatively simple task in a way that will make it easy to add new thumbnails?</p>