Imagem muda quando passa o mouse

Qual é minha questão:
Olá Convidado, vi em dois fórums algo que achei super legal e queria colocar em um código de Administradores para o meu fórum, tentei achar o código mas não consegui, vejam o Top Fame desse fórum : http://institutorpg.forumeiros.com/

Links e imagens do meu problema:
Http://institutorpg.forumeiros.com/

Endereço do meu fórum:


Versão do meu fórum:
PHPBB2

Boa noite autora,

Poderia ser mais especifica com sua questão?
Pelo o que eu compreendi, possa ser isto.

Queira checar:

https://ajuda.forumeiros.com/t21619-tutorial-mudar-imagem-ao-passar-o-mouse

Cordialmente Skyline.

Boa noite Skyline,

Posso sim, é quase isso, mas quero outro efeito o que cria tipo um campo de texto, como indicado mais ou menos nessa imagem: https://2img.net/h/oi45.tinypic.com/t68rht.png , não dá pra tirar print mas é o efeito que tem quando passa o mouse. Obrigada pela atenção

Boa noite novamente,

O código utilizado, é um CSS:

Código:

.the_best_bad_boy
{
display: inline-block;
position: absolute;
z-index: 5;
width: 100px;
height: 100px;
margin-top: 70px;
margin-left: 20px;
border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
-htm-border-radius: 6px;
-webkit-border-radius: 6px;
background: url(http://img851.imageshack.us/img851/1360/33e0km8.jpg) center center no-repeat #000000;
border: 1px solid #3d3d3d;
transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
opacity: 0.7;
transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
-htm-transition: all 1s;
}
.the_best_bad_boy:hover
{
opacity: 1;
transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
-htm-transition: all 1s;
}
.the_best_bad_boy_info
{
display: block;
width: 0px;
height: 0px;
overflow: auto;
text-align: justify;
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter: alpha(opacity=0);
transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
-htm-transition: all 1s;
font-size: 0px;
}
.the_best_bad_boy:hover .the_best_bad_boy_info
{
display: block;
width: 200px;
height: 120px;
overflow: auto;
text-align: justify;
position: absolute;
z-index: 99;
margin-left: 100px;
transform: rotate(20deg);
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
background: url(http://i29.servimg.com/u/f29/16/29/53/03/ngg10.png) repeat;
border: 1px solid #000;
border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
-htm-border-radius: 6px;
-webkit-border-radius: 6px;
padding: 4px;
font-size: 10px;
color: #3d3d3d;
text-shadow: 0px 0px 1px #000;
  line-height: 90%; padding-bottom: 2px;
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
-htm-transition: all 1s;
}







.the_best_bitch
{
display: inline-block;
position: absolute;
z-index: 4;
width: 100px;
height: 100px;
margin-top: 70px;
margin-left: 115px;
border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
-htm-border-radius: 6px;
-webkit-border-radius: 6px;
background: url(http://img851.imageshack.us/img851/1360/33e0km8.jpg) center center no-repeat #000000;
border: 1px solid #3d3d3d;
transform: rotate(10deg);
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
opacity: 0.7;
transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
-htm-transition: all 1s;
}
.the_best_bitch:hover
{
z-index: 5;
opacity: 1;
transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
-htm-transition: all 1s;
}
.the_best_bitch_info
{
display: block;
width: 0px;
height: 0px;
overflow: auto;
text-align: justify;
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter: alpha(opacity=0);
transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
-htm-transition: all 1s;
font-size: 0px;
}
.the_best_bitch:hover .the_best_bitch_info
{
display: block;
  line-height: 90%; padding-bottom: 2px;
width: 200px;
height: 120px;
overflow: auto;
text-align: justify;
position: absolute;
z-index: 99;
margin-left: 100px;
transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
background: url(http://i29.servimg.com/u/f29/16/29/53/03/ngg10.png) repeat;
border: 1px solid #000;
padding: 4px;
font-size: 10px;
color: #3d3d3d;
text-shadow: 0px 0px 0px #000;
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
-htm-transition: all 1s;
}

.the_best_action
{
display: inline-block;
position: absolute;
z-index: 2;
width: 100px;
height: 100px;
margin-top: 170px;
margin-left: 20px;
border: 4px solid #ffffff;
border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
-htm-border-radius: 6px;
-webkit-border-radius: 6px;
background: url(http://img851.imageshack.us/img851/1360/33e0km8.jpg) center center no-repeat #000000;
border: 1px solid #3d3d3d;
transform: rotate(-30deg);
-moz-transform: rotate(-40deg);
-webkit-transform: rotate(-40deg);
-o-transform: rotate(-40deg);
-ms-transform: rotate(-40deg);
opacity: 0.7;
transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
-htm-transition: all 1s;
}
.the_best_action:hover
{
z-index: 5;
opacity: 1;
transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
-htm-transition: all 1s;
}
.the_best_action_info
{
display: block;
width: 0px;
height: 0px;
overflow: auto;
text-align: justify;
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter: alpha(opacity=0);
transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
-htm-transition: all 1s;
font-size: 0px;
}
.the_best_action:hover .the_best_action_info
{
display: block;
width: 200px;
height: 120px;
overflow: auto;
  line-height: 90%; padding-bottom: 2px;
text-align: justify;
position: absolute;
z-index: 99;
margin-left: 100px;
transform: rotate(40deg);
-moz-transform: rotate(40deg);
-webkit-transform: rotate(40deg);
-o-transform: rotate(40deg);
-ms-transform: rotate(40deg);
background: url(http://i29.servimg.com/u/f29/16/29/53/03/ngg10.png) repeat;
border: 1px solid #000;
border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
-htm-border-radius: 6px;
-webkit-border-radius: 6px;
padding: 4px;
font-size: 10px;
color: #3d3d3d;
text-shadow: 0px 0px 1px #000;
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
-htm-transition: all 1s;
}
.the_best_post
{
display: inline-block;
position: absolute;
z-index: 1;
width: 100px;
height: 100px;
margin-top: 170px;
margin-left: 115px;
border: 4px solid #ffffff;
border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
-htm-border-radius: 6px;
-webkit-border-radius: 6px;
background: url(http://img851.imageshack.us/img851/1360/33e0km8.jpg) center center no-repeat #000000;
border: 1px solid #3d3d3d;
transform: rotate(20deg);
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
opacity: 0.7;
transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
-htm-transition: all 1s;
}
.the_best_post:hover
{
z-index: 5;
opacity: 1;
transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
-htm-transition: all 1s;
}
.the_best_post_info
{
display: block;
width: 0px;
height: 0px;
overflow: auto;
text-align: justify;
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter: alpha(opacity=0);
transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
-htm-transition: all 1s;
font-size: 0px;
}
.the_best_post:hover .the_best_post_info
{
display: block;
width: 200px;
  line-height: 90%; padding-bottom: 2px;
height: 120px;
overflow: auto;
text-align: justify;
position: absolute;
z-index: 99;
margin-left: 100px;
transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
background: url(http://i29.servimg.com/u/f29/16/29/53/03/ngg10.png) repeat;
border: 1px solid #000;
border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
-htm-border-radius: 6px;
-webkit-border-radius: 6px;
padding: 4px;
font-size: 10px;
color: #3d3d3d;
text-shadow: 0px 0px 1px #000;
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
-htm-transition: all 1s;
}

.cutest_couple
{
display: inline-block;
position: absolute;
z-index: 1;
width: 100px;
height: 100px;
margin-top: 230px;
margin-left: 80px;
border: 4px solid #ffffff;
border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
-htm-border-radius: 6px;
-webkit-border-radius: 6px;
background: url(http://img851.imageshack.us/img851/1360/33e0km8.jpg) center center no-repeat #000000;
border: 1px solid #3d3d3d;
opacity: 0.7;
transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
-htm-transition: all 1s;
}
.cutest_couple:hover
{
z-index: 5;
opacity: 1;
transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
-htm-transition: all 1s;
}
.cutest_couple_info
{
display: block;
width: 0px;
height: 0px;
overflow: auto;
text-align: justify;
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter: alpha(opacity=0);
transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
-htm-transition: all 1s;
font-size: 0px;
}
.cutest_couple:hover .cutest_couple_info
{
display: block;
width: 200px;
height: 120px;
  line-height: 90%; padding-bottom: 2px;
overflow: auto;
text-align: justify;
position: absolute;
z-index: 99;
margin-left: 100px;
background: url(http://i29.servimg.com/u/f29/16/29/53/03/ngg10.png) repeat;
border: 1px solid #000;
border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
-htm-border-radius: 6px;
-webkit-border-radius: 6px;
padding: 4px;
font-size: 10px;
color: #3d3d3d;
text-shadow: 0px 0px 1px #000;
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
-htm-transition: all 1s;
}

/* Começo - Código de Descrição */

.description
{
display: inline-block;
position: center;
z-index: 4;
width: auto;
height: auto;
border-radius: 0px;
-moz-border-radius: 0px;
-o-border-radius: 0px;
-htm-border-radius: 0px;
-webkit-border-radius: 6px;
background: none;
border: 0px solid #3d3d3d;
transform: none;
-moz-transform: none;
-webkit-transform: none;
-o-transform: none;
-ms-transform: none;
transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
-htm-transition: all 1s;
}

.description:hover
{
z-index: 5;
opacity: 1;
transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
-htm-transition: all 1s;
}

.description_info
{
display: block;
width: 0px;
height: 0px;
overflow: auto;
text-align: justify;
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter: alpha(opacity=0);
transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
-htm-transition: all 1s;
font-size: 0px;
}

.description:hover .description_info
{
display: block;
width: 427px;
height: auto;
overflow: auto;
text-align: justify;
  line-height: 90%; padding-bottom: 2px;
z-index: 99;
position: absolute;
transform: none;
-moz-transform: none;
-webkit-transform: none;
-o-transform: none;
-ms-transform: none;
background: url(http://i29.servimg.com/u/f29/16/29/53/03/ngg10.png) repeat;
border: 1px solid #000;
padding: 4px;
font-size: 10px;
color: #3d3d3d;
text-shadow: 0px 0px 0px #000;
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
-htm-transition: all 1s;
}

/* Fim - Código de Descrição */

Adicione-o em: Painel de Controle >> Visualização >> Imagens e Cores >> Cores >> Folha de Estilo CSS

Cordialmente Skyline.

Deu certo, Skyline muito obrigada mesmo, e eu que tava tentando colocar um código sem noção nos widgets do fórum, nunca imaginava que ia ser no CSS, obrigada mesmo!!! Grata pela atenção

Questão resolvida!