[Resolvido] Efeito Transição menu com Imagens

Bom dia a todos!

Primeiramente coloquei esse post na área de WebStandarts, porém fugiu um pouco do foco e veio para JavaScript/jQuery, meu problema é o seguinte:

Preciso criar um menu igual aquele do MAC OS, aqui vai um exemplo feito em jQuery: www.wizzud.com/jqDock/

Até ai tudo bem, eu encontrei dezenas de plugins prontos como este, porém 90% deles são feitos apenas com âncoras, e eu utilizo uma lista não ordenada, que "semântimante" é o mais correto, e não quero desfazer isso.

Meu Código HTML

<ul id="menu-footer">
 <li>
 <div class="ft-img-acesso"><a href="index.html" title="Página Inicial"><img src="icons/48/home.png" alt="Página Inicial" /></a></div>
 <div class="ft-titulo-acesso"><a href="index.html" title="Página Inicial">Página Inicial</a></div>
 </li>
 <li>
 <div class="ft-img-acesso"><a href="interna.html" title="Consulta"><img src="icons/48/consulta.png" alt="Consulta" /></a></div>
 <div class="ft-titulo-acesso"><a href="interna.html" title="Página Inicial">Consulta</a></div>
 </li>
 <li>
 <div class="ft-img-acesso"><a href="interna.html" title="Configurações"><img src="icons/48/configs.png" alt="Configurações" /></a></div>
 <div class="ft-titulo-acesso"><a href="interna.html" title="Página Inicial">Configurações</a></div>
 </li>
 <li>
 <div class="ft-img-acesso"><a href="interna.html" title="Contatos"><img src="icons/48/contacts.png" alt="Contatos" /></a></div>
 <div class="ft-titulo-acesso"><a href="interna.html" title="Página Inicial">Contatos</a></div>
 </li>
 <li>
 <div class="ft-img-acesso"><a href="interna.html" title="Ajuda (Help Desk)"><img src="icons/48/help-desk.png" alt="Ajuda (Help Desk)" /></a></div>
 <div class="ft-titulo-acesso"><a href="interna.html" title="Página Inicial">Ajuda</a></div>
 </li>
 <li>
 <div class="ft-img-acesso"><a href="interna.html" title="Arquivos"><img src="icons/48/folder.png" alt="Arquivos" /></a></div>
 <div class="ft-titulo-acesso"><a href="interna.html" title="Página Inicial">Arquivos</a></div>
 </li>
 <li>
 <div class="ft-img-acesso"><a href="interna.html" title="Busca Geral"><img src="icons/48/busca-geral.png" alt="Busca Geral" /></a></div>
 <div class="ft-titulo-acesso"><a href="interna.html" title="Página Inicial">Busca Geral</a></div>
 </li>
 <li>
 <div class="ft-img-acesso"><a href="interna.html" title="Mensagens"><img src="icons/48/mensagens.png" alt="Mensagens" /></a></div>
 <div class="ft-titulo-acesso"><a href="interna.html" title="Página Inicial">Mensagens</a></div>
 </li>
 <li>
 <div class="ft-img-acesso"><a href="interna.html" title="Fórum"><img src="icons/48/forum.png" alt="Fórum" /></a></div>
 <div class="ft-titulo-acesso"><a href="interna.html" title="Página Inicial">Fórum</a></div>
 </li>
 <li>
 <div class="ft-img-acesso"><a href="interna.html" title="Notícias"><img src="icons/48/news.png" alt="Notícias" /></a></div>
 <div class="ft-titulo-acesso"><a href="interna.html" title="Página Inicial">Notícias</a></div>
 </li>
 <li>
 <div class="ft-img-acesso"><a href="interna.html" title="Multimídia"><img src="icons/48/multimidia.png" alt="Multimídia" /></a></div>
 <div class="ft-titulo-acesso"><a href="interna.html" title="Página Inicial">Multimídia</a></div>
 </li>
 <li>
 <div class="ft-img-acesso"><a href="interna.html" title="Eventos"><img src="icons/48/events.png" alt="Eventos" /></a></div>
 <div class="ft-titulo-acesso"><a href="interna.html" title="Página Inicial">Eventos</a></div>
 </li>
 </ul>

Os outros 10% não se encaixaram com o meu Layout, pois usam propriedades que desconfigurão tudo.

Olhem meu Menu como é:

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.fernandotholl.net/imagens/menu-footer.jpg&key=0069fdd40ad4eab521c7df43f17eaa7f0b97a165126e034ef7fcc9223113c0c9" alt="menu-footer.jpg" />

Se alguém conseguir uma forma simples de implementar, utilizando um Plugin quem sabe, poxa seria ótimo, caso contrário terei que avaliar outra solução.