jQuery fadeIn on hover not working: div with jpg inside div

Question

My fiddle:

http://jsfiddle.net/Osceana/tEStg/18/

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.

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).

Thanks for any help!

HTML:

    <div id="outerMermaid">
    <div id="innerMermaid">
      <a href="http://www.google.com"><img src="http://files-cdn.formspring.me/photos/20120507/n4fa814fb4b286.jpg"></a>
</div>
</div>

<audio id="mermaidCall" src="http://www.dailywav.com/sites/default/files/wavs/whitewomen.wav" preload="auto">
    </audio>

CSS:

#outerMermaid
{
    height:287px;
    width::187px;
    position:fixed;
    top:70%;
    left:50%;

}

#innerMermaid
{
    position:relative;
    top:-50%;
    left:-50%;
    width:100%;
    height:100%;
    visibility:hidden;
}

js:

$( document ).ready(function() {
var call = $("#mermaidCall")[0];
$("#outerMermaid").hover(function() {
    call.play();
    $("#innerMermaid").fadeIn("slow");
}, function() { 
    $("#innerMermaid").fadeOut(); 
});
});

Answer 1

You're passing 3 callback for the jQuery.hover. It should be 2:

$(function() {
    var call = $("#mermaidCall")[0];
    $("#outerMermaid").hover(function() {
        call.play();
        $("#innerMermaid").fadeIn("slow");
    }, function() { 
        $("#innerMermaid").fadeOut(); 
    });
});

To hide the content flowing outside the #outerMermaid add overflow:hidden to it:

#outerMermaid {
    overflow: hidden;
}

---

EDIT:

Moreover the fading doesn't work because you have a syntax error in your #outerMermaid style

width::187px;

should be

width:187px;

It causes the #outerMermaid to be 0 wide, which practically makes it impossible to hover.

Also, the #innerMermaid should have

display: none;

instead of

visibility: hidden;

Here's updated fiddle of yours: FIDDLE.