title: toggle opposite divs when mouseover and mouse out
body: <p>Struggling with this one, I have 4 divs, 2 text and 2 images, within 2 colums...
  I want to have an image fade in over the left column and show text on the right column, but then when i hover over the right column i want the image on the right to fade in and text fade in on the left column and visa versa, with the page loading having text on the left and an image on the right. </p>
  
  <p>i have a fiddle that i can't get to work </p>
  
  <p><a href="http://jsfiddle.net/bloodygeese/pd6Jf/7/" rel="nofollow">http://jsfiddle.net/bloodygeese/pd6Jf/7/</a></p>
  
  <p>so hovering over either column with produce the 2 sets ups below alternating</p>
  
  <pre><code>text | image
  Image | text 
  </code></pre>