Efeito no Rank

Olá! gostaria de aplicar o seguinte efeito: https://ajuda.forumeiros.com/t64155-tutorial-adicionar-efeito-ao-passar-o-mouse-por-cima-da-avatar

às imagens dos ranks em meu forum.

Obrigado

---

Fórum: http://fairytailrpg.forumais.com (punBB)

Olá,Tente este código :

Código:

div.user-basic-info rank{
    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 rank:hover {
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
}

Passar bem.

não resultou.

Tales, use este CSS:

Código:

.user-basic-info:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}
.user-basic-info {
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;
}

Abraços.

Bom eu não queria que o rank fosse junto com o avatar mais ficou legal ^_^

resolve.