image mouseover

image mouseover

Hi all, I'm a newbie of course. I'm trying to duplicate the mouseover functionality from this link: http://www.bbc.co.uk/iplayer/episode/b0 ... he_Legacy/

Basically, when the user mouse over the image, the image will fade and the text will display.

It's just adding CSS class to the image and the text div, dynamically.
CSS class "background" for the image will fade the image, and then "show" class to the text div will display the text.

here are the js codes, I think that's supposed to do the job (not written by me - just copied it from that website).
function c(d,e)
      {
         d=$(d);
         e=(e&1?"add":"remove")+"Class";
         d.get(".details").slice(0,1)[e]("show");
         d.get("img").slice(0,1)[e]("background")
      }
      var b={mouseover:function(d) {c(this,1)},mouseout:function(d) {c(this)}}


The HTML:
<li class="episode">
        <img width="175" height="110" src="image.jpg"/>
        <div class="feature">
         <a href="">
         <span class="title">Skin, Aging, and Beauty</span>
         </a>
         </div>
        <div class="details">
         <h3><a href="">Blah Blah</a></h3>
         <p>asldfj alsdjf alsdjf</p>
         <a onfocus="blur()" href="">alsjfs asf aslf</a>
        </div>
       </li>


CSS:
.background {filter:alpha(opacity=15);-moz-opacity:.15;opacity:.15}
.details {display:block;PADDING:2px;MARGIN-TOP:0px;WIDTH:175px;CURSOR:pointer;POSITION:absolute;TOP:0px;HEIGHT:8.1em;LEFT: -9999px;}
.show {LEFT:20px}


any help would be highly appreciated!!!!