Imagem muda quando passa o mouse
2 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
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
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
Re: Imagem muda quando passa o mouse
Boa noite autora,
Poderia ser mais especifica com sua questão?
Pelo o que eu compreendi, possa ser isto.
Queira checar:
Cordialmente Skyline.
Poderia ser mais especifica com sua questão?
Pelo o que eu compreendi, possa ser isto.
Queira checar:
Cordialmente Skyline.
![Dormir](/users/2612/28/77/07/smiles/20180.gif)
Re: Imagem muda quando passa o mouse
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
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
Re: Imagem muda quando passa o mouse
Boa noite novamente,
O código utilizado, é um CSS:
Adicione-o em: Painel de Controle >> Visualização >> Imagens e Cores >> Cores >> Folha de Estilo CSS
Cordialmente Skyline.
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.
![...](/users/2612/28/77/07/smiles/23698.gif)
Re: Imagem muda quando passa o mouse
![Em choque](/users/2612/28/77/07/smiles/896262.gif)
![Tive uma idéia!](/users/2612/28/77/07/smiles/176384.gif)
Questão resolvida!
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos