Javascript rollover make weird flicker on body text - how to fix it?

Question

I am currently working for a website, they want me to add a rollover effect on the home page (vps.futureaccess.ca/~kraun). So... I found a nice Javascript code and insert it in PHP, but when I move the mouse on one of these 3 buttons, I noticed a weird 'flicker' on the body text. I was wondering if you know how to fix this issue? I am not an javascript expert.

Here is the javascript code:

<script type="text/javascript">         
$(document).ready(function(){

    //Set opacity on each span to 0%
    $(".rollover").css({'opacity':'0'});

    $('.img_list a').hover(
        function() {
            $(this).find('.rollover').stop().fadeTo(700, 1);
        },
        function() {
            $(this).find('.rollover').stop().fadeTo(500, 0);
        }
    )

});     
</script>

Thanks!

Answer 1

Don't fade to zero (which makes it disappear), fade to 0.1