Question

when you hover over the left side (previous function) slides in and fades darker and vice versa for the right

here’s what I got so far thanks to Deleteman

http://jsfiddle.net/pQzWp/

Answer 1

I would try to do the following:

Inside the block element that holds the image, add two block elements like this:

 #element1 {
 position:absolute;
 left:0; 
 top:0
 width:30%;
 height:100%; 
}

 #element2 {
  position:absolute;
  right:0;
  top:0
  width:30%;
  height:100%;
 }

And the position of the image container, set it the position to be “relative”.

Now, you can set events like this:

$("#element1").mouseover(function() {
    //show "prev" link
 });

$("#element2").mouseover(function() {
  //show "next" link
 });

Hope it helps!

Edit

Check it out: http://jsfiddle.net/pQzWp/7/

Changed your framework to JQuery, since I don’t know much about mootools, you can change the fadeIn and fadeOut effect for whatever you want.