I'm new to markup and coding in any form. I love jQuery though and what it's capable of and also how intuitive it is to start with! I've run into a problem for what I'm doing with my portfolio though.

I'm trying to achieve something like  this (the top left one).

I get how to do it if I wanted to write a script for each individual box, changing out the selectors -- but how can I do it with only one script?

Goal: On hover-over of class "preview", it grabs the ID of which img is being hovered - "SkyHarbor". Then it applies that fetched value to lift the class "infopane" associated with ID "SkyHarbor". Do you get what I'm saying?

If hover over img#X, reveal div#X

Am I attacking this the wrong way?

Thanks!

 Here's a snippet:

2. <div id="portfolio">
4. <img class="preview" id="SkyHarbor" src="images/portfolio/all/skyharbor.png"></img>
5. <div class="infopane" id="SkyHarbor"><h4>Sky Harbor Ad Mockup</h4></div>
6. <img class="preview" id="Ignition" src="images/portfolio/all/ignition.png"></img>
7. <div class="infopane" id="Ignition"><h4>Ignition Logo</h4></div>
8. <img class="preview" src="images/portfolio/all/skyharbor.png"></img>
9. <img class="preview" src="images/portfolio/all/skyharbor.png"></img>
10. <img class="preview" src="images/portfolio/all/skyharbor.png"></img>
11. <img class="preview" src="images/portfolio/all/skyharbor.png"></img>
12. </div>