<style>  
  #iconbar li {  
  float:left;  
  position:relative;  
  overflow: hidden;  
  margin-right:10px;  
  background-image: url("/other/plavno_viezchauchii_profil_bl_1.png");  
  background-size: 100% 100%;  
  border: #BFCCEF solid 1px;  
  box-shadow: 0px 0px 10px #BFCCEF;  
  color: #657194;  
  }  
  #iconbar a {  
  text-decoration: none;  
  outline: none;  
  display: block;  
  width: 48px;  
  cursor:pointer;  
  }  
  #iconbar span {  
  width: 100px;  
  position: absolute;  
  line-height:110%;  
  font-family: "Tahoma";  
  font-size: 13px;  
  color: #9099b4;  
  padding-top: 5px;  
   
  text-shadow: 1px 1px 0px #FFFFFF;  
  }  
  </style>

#iconbar li{float:left;position:relative;overflow:hidden;margin-right:10px;background-image:url(/other/plavno_viezchauchii_profil_bl_1.png);background-size:100% 100%;border:#BFCCEF solid 1px;box-shadow:0 0 10px #BFCCEF;color:#657194}  
  #iconbar a{text-decoration:none;outline:none;display:block;width:48px;cursor:pointer}  
  #iconbar span{width:100px;position:absolute;line-height:110%;font-family:Tahoma;font-size:13px;color:#9099b4;padding-top:5px;text-shadow:1px 1px 0 #FFF}

<script language="JavaScript" type="text/javascript">  
  $(function(){  
  $(".auserpanel")  
  .hover(function() {  
  $(this).animate({'width': '155'}, "fast");  
  })  
  .mouseleave(function(){  
  $(this).animate({'width': '48'}, "fast");  
  });  
  });  
  </script>

<ul id="iconbar">  
  <li><a class="auserpanel" href="$PERSONAL_PAGE_LINK$"><img style="padding-left: -10px;" src="/other/perconalinai_ctranicha_userpm.png" border="0" ><span>Персональная Стрница</span></a></li>  
  <li><a class="auserpanel" href="$PM_URL$"><img src="/other/lichnii_coobchenii_userls.png" border="0" ><span>Личные Сообщения</span></a></li>  
  <li><a class="auserpanel" href="/index/10"><img src="/other/zaverchiti_ceanc_exit.png" border="0" ><span>Завершить Сеанс</span></a></li>  
  </ul>