Question

I have a webpage that needs to show a sliding panel when you hover your cursor close enough to the bottom.

This is before.

This is after

The closest effect I have seen is in https://read.amazon.com when you read an ebook and the top and bottom controls appear when your cursor move close enough.

If I have placed this question in the wrong stackexchange, I apologize.

UPDATE:

Let me explain that even if the screen is scrollable vertically, the bottom sliding up element should always appear at the bottom of the screen so i guess, it is more than just using jQuery.hover.

Another UPDATE:

I also want to add that when the cursor hovers close enough but not on the element itself, the element is triggered to slide up.

Answer 1

1. To get the hover effect:

You can consider using JavaScript, more specifically jQuery .hover()

HTML:

<p>A bunch of text here ...</p>
<div id="toHover">
     <div id="toShowOnHover">This is something to show</div>
</div>

JS:

$("#toHover").hover(
  function() { $("#toShowOnHover").show(); },
  function() { $("#toShowOnHover").hide(); }
);

2. To keep div on the bottom:

CSS:

#toHover {position: fixed; bottom: 0px; left: 0px; width: 100%; height: 40px; }
#toShowOnHover {background-color:red; height: 40px; }

Check out the JS Fiddle and see if it is what you have in mind