HIde div on mouse over

by panchroma

HTML

<div id="the-image"></div>
<div id="the-content">Bla bla bla</div>
<div id="see-the-image">IMG</div>

CSS

body{
    margin:0;
}
#the-image{
    width:100%;
    height:100%;
    background:#07f;
    position:fixed;
    top:0;
    left:0;
}
#the-content{
    position:relative;
    width:200px;
    height:2000px;
    background:#fff;
    box-shadow:0 0 10px #000;
    padding:10px;
    margin:10px auto;
}
#see-the-image{
    width:30px;
    height:30px;
    position:fixed;
    bottom:0;
    left:0;
    background:#f00;
    color:#fff;
}

JavaScript

$('#see-the-image').mouseover(function(){
    $('#the-content').fadeOut();
}).mouseout(function(){
    $('#the-content').fadeIn();
});