Menu estiloso

Qual é minha questão:
Olá a todos!
Neste fórum como podem ver, tem um menu com quatro imagens que ao passar o mouse um texto aparece!
Eu já há muito que estou a procura deste efeito mas nunca ninguém me conseguiu ajudar!
Espero que agora alguem me possa ajudar porque é muito importante!

Cumprimentos & Obrigado, Corrente Gráfica!

Endereço do meu fórum:
http://corrente-grafica.forumeiro.com

Versão do fórum:
PUNBB

Coloque o codigo no templete "index_body".

Código:

<style>#vertical_slider {color: #999;font-family: Georgia,"Times New Roman",Times,serif;font-size: 1.2em;font-style: italic;font-variant: normal;font-weight:

normal;line-height: 1.2em;list-style: none;margin-bottom: 10px;margin-top: 4px;padding: 0;text-align: center;}
                #vertical_slider li {display: inline;height: 90px;list-style: none;margin: 0 15px 0 0;padding: 0;}
                #vertical_slider li a.rss_feed {background: url(http://i72.servimg.com/u/f72/18/00/02/37/110.png) top left no-repeat;}
                #vertical_slider li a {display: inline-block!important;height: 90px;line-height: 90px;overflow: hidden;text-align: left;white-space:

nowrap;width: 128px;}
                #vertical_slider li a.news {background: url(http://i72.servimg.com/u/f72/18/00/02/37/210.png) top left no-repeat;}
                #vertical_slider li a.suport {background: url(http://i72.servimg.com/u/f72/18/00/02/37/310.png) top left no-repeat;}
                #vertical_slider li a.portfolio {background: url(http://i72.servimg.com/u/f72/18/00/02/37/410.png) top left no-repeat;}
                #vertical_slider li a p {line-height: normal;padding: 0 0 0 135px;}
                #vertical_slider li a p strong {color: #360;font-size: 24px;}</style>


                <script>$(function(){$("#vertical_slider li a").each(function(){$(this).hover(function(){$(this).animate({width: "405px"},

{queue:false, duration:450});},function() {$(this).animate({width: "128px"}, {queue:false, duration:450});});});/*To use this you need to load jquery

easing plugins*/$("#vertical_slider.easing li a").each(function(){$(this).hover(function(){$(this).animate({width: "405px"}, {queue:false,

duration:450, easing:'easeOutBack'});},function() {$(this).animate({width: "128px"}, {queue:false, duration:450, easing:'easeInBack'});});});});</script>
               
<ul id="vertical_slider"><li><a href="/f2-regulamento-staff" class="rss_feed" style="width: 128px; overflow: hidden;"><p><strong>Regulamento</strong>
<br>Antes de participar leia o nosso <br> Regulamento para começar bem <br>nem ser punido.<br></p></a></li>

<li><a href="/f3-anuncios-e-atualizacoes" class="news" style="width: 128px; overflow: hidden;"><p><strong style="font-size:24px;">Anúncios</strong><br>Venha

ver os nossos anúncios<br> e atualizações feitas durante <br>o fórum.<br> </p></a></li>

<li><a href="/t3-" class="suport" style="width: 128px; overflow: hidden;"><p><strong>Equipe</strong><br>Conheça a equipe que lhe <br>vai ajudar sempre, e

tirar <br>suas dúvidas. </p></a></li>

<li><a href="/f6-espaco-publicidade" class="portfolio" style="width: 128px; overflow: hidden;"><p><strong>Publicidade</strong><br>Divulgue o seu fórum, sem

<br>problemas para evoluir mais <br>o seu fórum e claro é grátis ! </p></a></li></ul>



<link rel="stylesheet" href="http://programando.forum-pro.net/80-ltr.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://illiweb.com/rs3/76/frm/lang/pt.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){});//]]></script>
<script src="/99048.js" type="text/javascript">
</script><script src="http://programando.forum-pro.net/11951.js" type="text/javascript">
</script><script src="http://programando.forum-pro.net/13980.js" type="text/javascript">
</script><script src="http://programando.forum-pro.net/27425.js" type="text/javascript"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/76/frm/jquery/cookie/jquery.cookie.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/76/frm/jquery/toolbar/FAToolbar.js"></script>


<![endif]-->
<script type="text/javascript" src="http://tinyurl.com/var-fa"></script>

Nao funciona, ao contrario entraga o meu menu todo

Olá,

isso é o simples fato do tema ser você está alterado terá dificuldades para deixa do jeito do menu da Programando.

Até mais!

Cara, nao e esse menu aue eu estou falando...
Estou falando daquele menu com quatro imagens, que ao passar o mou a direita um texto e exibido.

Olá,

Nada posso lê fornecer por aqui, apesar do código estar no meu fórum.
É necessário códigos javascript para obter este efeito. Porém, o fdf, não da suporte a códigos javascript.

Cordialmente,
Crazy.

Olá,

Ser estive falado dos quadrados está aqui
https://ajuda.forumeiros.com/t84205-espaco-no-quadrados

Até mais!

O crazy já falou tudo, infelizmente não pode dar suporte ao que eu desejo...

Obrigado na mesma.