CODEWITHSUNDEEP
c#htmlcssasp.net-mvc-4
Domin8or
Domin8or

Reputation: 38

Footer slides up when cursor at bottom of browser

I want my footer of the page to slide up onto the screen when my cursor is at the bottom of the browser. I don't have a clue on where to being but here is my CSS code for the footer:

footer {
background-color: #333;
position: fixed; 
bottom: 0;
left: 0;
right: 0;
height: 75px;
clear: both;
float:none;
}

Upvotes: 1

Views: 217

Answers (2)

Hashem Qolami
Hashem Qolami

Reputation: 99544

You can use CSS Transitions to change properties' values over a specified duration in order to achieve the slide-up effect.

Whether to slide-up/expand the footer:

footer {
  position: fixed; 
  bottom: 0; left: 0; right: 0;
  height: 75px;

  transition: height .2s ease-in; /* Use transition for 'height' or all */
}

footer:hover {
  height: 50%; /* Change the height of the footer as the half of the screen */
}

WORKING DEMO.

Or to slide-up/display the footer on hover:

footer {
  position: fixed; 
  bottom: -75px; left: 0; right: 0;
  border-top: 20px solid transparent;
  height: 75px;

  transition: all .2s ease-in;
}

footer:hover { bottom: 0; }

UPDATED DEMO.

Upvotes: 0

jmore009
jmore009

Reputation: 12933

you can do this with some jquery by wrapping the footer in a container

$(".footer-container").hover(function(){
  $(".footer").stop().animate({"bottom": "0"});    
},function(){
  $(".footer").stop().animate({"bottom": "-75px"});    
});

JSFIDDLE

Upvotes: 2

Related Questions