Widget personalizado

Qual é minha questão:
Quando eu entrei neste site http://rpgsud.forumeiros.com/forum vi que as quando passo o mouse sobre as imagens elas crescem e aparece um texto em baixo delas, eu queria saber qual o código para fazer as imagens ficarem assim.

Medidas que eu tomei para corrigir o problema:
Vim pedir socorro aqui.

Links e imagens do meu problema:
http://rpgsud.forumeiros.com/forum

Endereço do meu fórum:
http://dolohov.forumeiros.org

Versão do meu fórum:
PUNBB

Boa noite.

Aqui está o código:

Código:

<center><div class="maintitle">

Administrators

</div><div class="tablepad"><span class="desc"><div style="margin:auto;text-align:center;width:100%"><style type="text/css">

#popitmenu{
position: absolute;
background-color: #f2f2f2;
border: 1px solid #dfdfdf;
font: normal 9px arial;
line-height: 10px;
z-index: 100;
visibility: hidden;
}

#popitmenu a{
text-decoration: none;
padding: 3px;
color:#656565;
display: block;
}

#popitmenu a:hover{ /*hover background color*/
color: #A8A8A8;
text-decoration: none;
text-transform: lowercase;
border-bottom: 1px dotted #96a2b1;
line-height: 8px;
}

</style>

<script type="text/javascript">

var defaultMenuWidth="150px" //set default menu width.

var linkset=new Array()
//SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT

linkset[0]='<a href="LIINK PERFIL">BECKY</a>'
linkset[0]+='<a href="LIINK MP">MP</a>'

var ie5=document.all && !window.opera
var ns6=document.getElementById

if (ie5||ns6)
document.write('<div id="popitmenu" onMouseover="clearhidemenu();" onMouseout="dynamichide(event)"></div>')

function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

function showmenu(e, which, optWidth){
if (!document.all&&!document.getElementById)
return
clearhidemenu()
menuobj=ie5? document.all.popitmenu : document.getElementById("popitmenu")
menuobj.innerHTML=which
menuobj.style.width=(typeof optWidth!="undefined")? optWidth : defaultMenuWidth
menuobj.contentwidth=menuobj.offsetWidth
menuobj.contentheight=menuobj.offsetHeight
eventX=ie5? event.clientX : e.clientX
eventY=ie5? event.clientY : e.clientY
//Find out how close the mouse is to the corner of the window
var rightedge=ie5? iecompattest().clientWidth-eventX : window.innerWidth-eventX
var bottomedge=ie5? iecompattest().clientHeight-eventY : window.innerHeight-eventY
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<menuobj.contentwidth)
//move the horizontal position of the menu to the left by it's width
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX-menuobj.contentwidth+"px" : window.pageXOffset+eventX-menuobj.contentwidth+"px"
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX+"px" : window.pageXOffset+eventX+"px"
//same concept with the vertical position
if (bottomedge<menuobj.contentheight)
menuobj.style.top=ie5? iecompattest().scrollTop+eventY-menuobj.contentheight+"px" : window.pageYOffset+eventY-menuobj.contentheight+"px"
else
menuobj.style.top=ie5? iecompattest().scrollTop+event.clientY+"px" : window.pageYOffset+eventY+"px"
menuobj.style.visibility="visible"
return false
}

function contains_ns6(a, b) {
//Determines if 1 element in contained in another- by Brainjar.com
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function hidemenu(){
if (window.menuobj)
menuobj.style.visibility="hidden"
}

function dynamichide(e){
if (ie5&&!menuobj.contains(e.toElement))
hidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
hidemenu()
}

function delayhidemenu(){
delayhide=setTimeout("hidemenu()",500)
}

function clearhidemenu(){
if (window.delayhide)
clearTimeout(delayhide)
}

if (ie5||ns6)
document.onclick=hidemenu

</script><div id="popitmenu" onmouseover="clearhidemenu();" onmouseout="dynamichide(event)" style="width: 150px; left: 226px; top: 1569px; visibility: visible; "><a href="LIINK PERFIL">BECKY</a><a href="LIINK MP">MP</a></div><div style="margin:auto;text-align:center;width:100%"><a href="0" onmouseover="showmenu(event,linkset[0])" onmouseout="delayhidemenu()"><img src="https://lh4.googleusercontent.com/-ps8ztNo5uRY/TkePyjzuRWI/AAAAAAAACJA/ZTzlUKV8_3E/DannahAdministrator.png"></a></div></div>

<center><a href="#" onmouseover="showmenu(event,linkset[0], '180px')" onmouseout="delayhidemenu()"><img src="https://lh4.googleusercontent.com/-ps8ztNo5uRY/TkePyjzuRWI/AAAAAAAACJA/ZTzlUKV8_3E/DannahAdministrator.png" <="" img=""></a><br>

<a href="#" onmouseover="showmenu(event,linkset[1], '180px')" onmouseout="delayhidemenu()"><img src="https://lh5.googleusercontent.com/-d5VsAbOFPCE/TwPTi_g2o9I/AAAAAAAACfs/5InnTX5llSw/s175/kirstinlinkspic.png" <="" img=""></a>

</center>

</span></div>



<br></center>

Adicione-o em um Widget personalizado

Abraço.

Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'

Não é o windget não. Não tem aquela imagem que fica em baixo do tópico? Então quando eu paço o mouse sobre ela ela se expande e aparece um texto abaixo.

Fiz um print para lhe ajudar na compreenção

A Imagem do tópico está assim: https://i.servimg.com/u/f45/15/05/55/18/plano11.jpg

E quando o mouse está sobre a imagem ela fica assim:
https://i.servimg.com/u/f45/15/05/55/18/plano010.jpg

Olá e boa noite!
Mande-me sua CSS para que eu possa dar uma olhada.

Atenciosamente!

Boa noite.

Perdoe-me mas não consegui visualizar tais imagens, poderia especificar onde estão?

Abraço.

http://rpgwizengamot.forumeiros.com/

Nesse RPG Acima tem o que eu estou falando. No widget onde tem um velho, onde está escrito "Too Fame Of" Quando eu passo o mause sobre ele ele abri uma janelinha e eu queria saber qual o código.

Olá!
Adicione em um Widget:

Código:

<div style="padding-top: 0px; padding-left: 60px;"><br><br><br><br><br><br><br><div style="position:relative;"><div style="position:absolute; top:-140px; left:-60px; "><span class="the_best_bad_boy"><span class="the_best_bad_boy_info"><div style="font-size: 24px;text-shadow: 0px 0px 5px black;color: #593434; font-family: Geografia;"><div align="center"><strong>The Best Bad Boy</strong></div></div><font color="#272329">------------------------------------------------------------------</font><br><a href="http://institutorpg.forumeiros.com" class="postlink"><font style="color:#BDB39B; font-size: 10px;letter-spacing: 16px; text-transform: uppercase ;">-Anonimo</font></a><br><br><br><br><br></span></span><span class="the_best_bitch"><span class="the_best_bitch_info"><div style="font-size: 24px;text-shadow: 0px 0px 5px black;color: #593434; font-family: Geografia;"><div align="center"><strong>The Best Bitch</strong></div></div><font color="#272329">------------------------------------------------------------------</font><br><a href="http://institutorpg.forumeiros.com" class="postlink"><font style="color:#BDB39B; font-size: 10px;letter-spacing: 16px; text-transform: uppercase ;">-Anonimo</font></a><br><br><br><br><br></span></span><span class="the_best_action"><span class="the_best_action_info"><div style="font-size: 24px;text-shadow: 0px 0px 5px black;color: #593434; font-family: Geografia;"><div align="center"><strong>The Best Action</strong></div></div><font color="#272329">------------------------------------------------------------------</font><br><a href="http://institutorpg.forumeiros.com" class="postlink"><font style="color:#BDB39B; font-size: 10px;letter-spacing: 16px; text-transform: uppercase ;">-Anonimo</font></a><br><br><br><br><br></span></span><span class="the_best_post"><span class="the_best_post_info"><div style="font-size: 24px;text-shadow: 0px 0px 5px black;color: #593434; font-family: Geografia;"><div align="center"><strong>The Best Post</strong></div></div><font color="#272329">------------------------------------------------------------------</font><br><a href="http://institutorpg.forumeiros.com" class="postlink"><font style="color:#BDB39B; font-size: 10px;letter-spacing: 16px; text-transform: uppercase ;">-Anonimo</font></a><br><br><br><br><br></span></span><span class="cutest_couple"><span class="cutest_couple_info"><div style="font-size: 18px;text-shadow: 0px 0px 5px black;color: #593434; font-family: Geografia;"><div align="center"><strong>The Best Cutest Couple</strong></div></div><font color="#272329">------------------------------------------------------------------</font><br><a href="http://institutorpg.forumeiros.com" class="postlink"><font style="color:#BDB39B; font-size: 10px;letter-spacing: 16px; text-transform: uppercase ;">-Anonimo</font></a><br><br><br><br><br></span></span></div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div></div>

Resulta?

Atenciosamente!

Resulta sim. Obrigada!