Кнопка с ховером

Приветствую всех.
У меня такой вопрос. На сайте использую в меню кнопки с ховером.
Сегодня переделал алгоритм кнопки, добавил анимацию.
сайт - http://getairborne.ru
HTML:

<p class="sidemenu_akcii"><a href="/akcii/" target="_blank"></a></p>
<p class="sidemenu_video"><a href="/video/" target="_blank"></a></p>

Реализация первая на css:

.sidemenu_akcii {
    border: 0px;
    cursor: pointer;
    margin: -3px 0px 0px 10px;
    width: 291px;
    height: 52px;
    background: url("../img/sidebar/akcii.png") no-repeat top;
}
.sidemenu_akcii:hover  {
    background-position: 0 10px;
    background: url("../img/sidebar/akcii.png") no-repeat bottom;
}

.sidemenu_video {
    border: 0px;
    cursor: pointer;
    margin: -5px 0px 10px 18px;
    width: 281px;
    height: 58px;
    background: url("../img/sidebar/videos.png") no-repeat top;
}
.sidemenu_video:hover  {
    background-position: 0 10px;
    background: url("../img/sidebar/videos.png") no-repeat bottom;
}

Реализация вторая на css:

.sidemenu_akcii {
    display:block;
    margin: -3px 0px 0px 13px;
    width: 286px;
    height: 52px;
    background:url("../img/sidebar/akcii.png") no-repeat 0 -52px;
}
.sidemenu_akcii a {
    display:block;
    /*width:100%;
    height:100%;*/
    width: 286px;
    height: 52px;
    background:url("../img/sidebar/akcii.png") no-repeat 0 0;
    text-indent:-9999px;
    border-width: 0;
}
.sidemenu_akcii a:hover {
    background-position:0 52px;
}

.sidemenu_video {
    display:block;
    margin: -5px 0px 10px 18px;
    width: 281px;
    height: 58px;
    background:url("../img/sidebar/videos.png") no-repeat 0 -58px;
}
.sidemenu_video a {
    display:block;
    width:100%;
    height:100%;
    background:url("../img/sidebar/videos.png") no-repeat 0 0;
    text-indent:-9999px;
    border-width: 0;
}
.sidemenu_video a:hover {
    background-position:0 58px;
}

Код анимации, плавного перехода:

$(document).ready(function(){
  $('p.sidemenu_akcii a')
    .css({ 'backgroundPosition': '0 0' })
    .hover(
      function(){
        $(this).stop()
          .animate({
            'opacity': 0
          }, 500);
      },
      function(){
        $(this).stop()
          .animate({
            'opacity': 1
          }, 500);
      }
    );    
    
  $('p.sidemenu_video a')
    .css({ 'backgroundPosition': '0 0' })
    .hover(
      function(){
        $(this).stop()
          .animate({
            'opacity': 0
          }, 500);
      },
      function(){
        $(this).stop()
          .animate({
            'opacity': 1
          }, 500);
      }
    );
});

В итоге получаем такой вид кнопок:

Как видно ховер у нас выступает сзади из-за своей другой формы.
В первой реализации такого нету, но не работает скрипт анимации.
Собственно как можно переделать вторую реализацию дабы ховер не выступал, и анимация работала?