title: jQuery fadeIn on hover not working: div with jpg inside div
body: <p>My fiddle:</p>
  
  <p><a href="http://jsfiddle.net/Osceana/tEStg/18/" rel="nofollow">http://jsfiddle.net/Osceana/tEStg/18/</a></p>
  
  <p>I have a [hidden] image on my site that's supposed to have 2 events occur upon hover: an mp3 plays, and the image fades in. It's positioned in the middle of the page at the bottom. Was thinking the CSS positioning was causing issues, but when I remove all CSS positioning I still can't get the image to fadeIn. The mp3 DOES play on hover though.</p>
  
  <p>I also don't understand why the image is exceeding the dimensions set on the inner div in CSS. Why is this? My understanding was the inner div should have a height/width of 100% of its parent ("#outerMermaid" in this case).</p>
  
  <p>Thanks for any help!</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>    &lt;div id="outerMermaid"&gt;
      &lt;div id="innerMermaid"&gt;
        &lt;a href="http://www.google.com"&gt;&lt;img src="http://files-cdn.formspring.me/photos/20120507/n4fa814fb4b286.jpg"&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;audio id="mermaidCall" src="http://www.dailywav.com/sites/default/files/wavs/whitewomen.wav" preload="auto"&gt;
      &lt;/audio&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#outerMermaid
  {
      height:287px;
      width::187px;
      position:fixed;
      top:70%;
      left:50%;
  
  }
  
  #innerMermaid
  {
      position:relative;
      top:-50%;
      left:-50%;
      width:100%;
      height:100%;
      visibility:hidden;
  }
  </code></pre>
  
  <p><strong>js:</strong></p>
  
  <pre><code>$( document ).ready(function() {
  var call = $("#mermaidCall")[0];
  $("#outerMermaid").hover(function() {
      call.play();
      $("#innerMermaid").fadeIn("slow");
  }, function() { 
      $("#innerMermaid").fadeOut(); 
  });
  });
  </code></pre>