HTML/CSS making a mouse over button to display footer

Question

So for my project I've setup a fixed header and footer but noticed that my footer is rather large. What I'd like to do is hide it and add a button toward the bottom that when you hover over will display the whole footer.

Here is my current website: http://webcomp41.volume11.com/final/index.html

How would I go about adding this feature? Any help is greatly appreciated!

Answer 1

CSS Solution: (show/hide completely)

for it to work, you just need to make the button and the footer siblings

#footer
{
  display: none;
}
#button:hover ~ #footer
{
  display: block;
}

you can use the same technique to specify different size instead of show/hide.

and as Ali Sheikhpour said: notice: replace the word "button" with the ID of button and "footer" with the ID of footer.

Example HERE

Answer 2

jquery solution:

$("#button").hover(function(){$("#footer").show()})

notice: replace the word "button" with the ID of button and "footer" with the ID of footer.