fade out image on hover and show some hrefs on top of it

fade out image on hover and show some hrefs on top of it

i am in dire need of showing 5 hrefs on top of an image on hover of it. the image would be in faded colored background, and on mouseout hrefs will disappear and image will be 100% visible

the closest i could do is

<style>#option { display: none; }</style>
  <div id="container" class="cont">
  <a href="#" id="username" class="nomeutente" title=""> Stefano Imparato </a>
  </div>
  <div id="options" >
  <a href="#" id="user" title="">usr</a> </br>
  <a href="#" title="">impostazioni</a> </br>
  <a href="#" title="">esci</a> 
  </div>
<script  type="text/javascript">$("#container").mouseover(function(){   
        $("#container").append($("#options"));
        $("#options").css({
            'display' : 'block'
        });
        $(this).find('#user').text(usr);
    });

$("#container").mouseout(function(){
    $("#options").css('display','none');
});
</script>

thanks in advance
also i need this enacted on a class. not in id

regards