Início
Admin
Líder da Comunidade
Posts : 3752
Reputação : 5
Localização : Na frente do PC | Adicionar efeito ao passar o mouse por cima da avatar |
Este
tutorial é bem simples, quando você adicionar o código (que se encontra
a baixo) em sua página CSS, ao passar o mouse por cima do avatar ele
irá ter um efeito e ficará na "diagonal".
OBS: Efeito só funcionará em navegadores "mais modernos"
Tutorial retirado da Ajuda forumeiros Italiana.
--> Tutoriais, dicas e astúcias <--
Adicionar efeito ao passar o mouse por cima da avatar
Adicionar efeito ao passar o mouse por cima da avatar
Acesse: Painel de controles >> Visualização >> Cores >> Folha
de estilo CSS >> Aplique o código de sua versão:
Códigos para as devidas versões:
PhpBB2:
- Código:
.poster-profile img{
margin-left: 3px;
border: 5px solid #eee;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.poster-profile img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}
PhpBB3:
- Código:
div.postprofile dl dt img{
margin-left: 3px;
border: 5px solid #eee;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
div.postprofile dl dt img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}
PunBB:
- Código:
div.user-basic-info img{
margin: 3px;
border: 5px solid #eee;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
div.user-basic-info img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}
Invision:
- Código:
dl.postdetails dt img{
margin-bottom: 10px;
border: 5px solid #eee;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
dl.postdetails dt img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}
Pronto, após escolher código de sua versão, valide
Resultado final: 
© Fórum dos Fóruns & Otaviodg
 | Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Adicionar efeito ao passar o mouse por cima da avatar!. |
