CSS transition of div on hover over only part of div?

Question

Let me see how well I can explain this. I am working on an index on a website that is in a div that is pushed off of the page via css margin with only part of it showing. When you hover over the part that is showing, the rest slides down into view. This works fine. I already have the transition effect in place for the margin change slide and also a background color change with rgba. It looks very nice.

My question is, the index is around 500px wide and the visible part before hovering is 70px high. So that is a fairly large area of the screen for people to accidentally catch with their mouse hover if they are not trying to display the index div. Is there some way that I can only make part of the initially visible portion of the div activate the hover transition animation to bring the full div into view? Or perhaps someway I can attach a smaller div to this one as a sort of tab, that will bring down the larger div and itself via transition on hover?

I hope this makes sense. Thank you.

Here is the basic idea of the current code:

#index {
    position:fixed;
    background:rgba(0,0,0,0.3);
    width:500px;
    height:500px;
    top:0;
    left:50%;
    margin:-430px 0 0 -500px;
    transition:0.5s;
    -moz-transition:0.5s;
    -webkit-transition:0.5s;
    -o-transition:0.5s;}

#index:hover {
    background:rgba(0,0,0,0.8);
    margin:0 0 0 -500px;}

Answer 1

jsFiddle:

http://jsfiddle.net/wZ8zX/1/

html:

<div id="slider"><div id="trigger"><br></div></div>

js:

$('#trigger').hover(function(){
    $(this).parent().animate({'top':0},500); 
});
$('#slider').mouseleave(function(){
    $(this).animate({'top':-150},500); 
});

---

solution without jQuery:
http://jsfiddle.net/wZ8zX/3/

sorry i usually just browse jquery questions, so i didn't check the tags lol