Show div only when the mouse hovers over it

Show div only when the mouse hovers over it

I'm working on a personal website, at www.onwardandbeyond.tumblr.com and
the post are going across the page, instead of up and down. I also wanted
to create a website where when you hover over a post the following show:
reblog button, like button, permalink and the information about who the
source who originally created the post is. Is there an easier way for this
to be achieved that actually works because nothing I seem to come up with
does. You can see the full markup at onwardandbeyond.tumblr.com
My html reads as followed:
`enter code here` <div id="date">
{block:Date}
{DayOfWeek} {ShortMonth} {DayOfMonthWithZero}, {Year},
>{TimeAgo}{/block:Date} {block:NoteCount} {NoteCountWithLabel}
{/block:NoteCount}
{block:RebloggedFrom} reblog: {ReblogParentName} origin:
{ReblogRootName}>{/block:RebloggedFrom}
end code here
And so far the CSS reads:
`enter code here` #info{
color:#000;
position: absolute;
border-bottom: 2px #000 solid
text-transform: uppercase;
letter-spacing: 2px;
font: 10px Consolas;}
#info{
margin-top: 0px ;
margin-bottom:0px;
margin-right:;
margin-left:;}
#info{
padding-top: 620px;
padding-bottom:0px;
padding-right:0px;
padding-left:280px;
}
#info a{
color: #000;}
#date a, {
width: 280px;
color: #000;
position:absolute;
margin-top: 120px;
margin-left: 100px;
visibility: visible:
}
#date{
display: none;
}
#date:hover #datw{
display : block;
}
end code here