Seg 16 Jul 2012, 12:31 am | |
Efeito nas Opções do Post ao passar o mouse |
Neste Tutorial Exclusivo,Iremos Aprender á Ocultar as Opções do Post : Citar/Editar/Excluir/,Assim,Ao Passar o Mouse na Postagem,Faze-los Aparecer Novamente,com um Efeito de Opacidade.
O Resultado Final é Simples,Poste um Comentário Abaixo e Passe o Mouse pelo " editar " do seu Post e verá o Efeito.
Versão: Todas
Efeito nas Opções do Post ao passar o mouse
Adicione o Código respectivo á sua Versão em
Painel de controle ->> Visualização ->> Imagens e Cores ->> Cores ->> Folha de estilo CSS ->>
PunBB
- Código:
.post:hover .post-options {
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
opacity: .5;
}
.post .post-options:hover {
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
opacity: 1!important;
}
.post .post-options {
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
opacity: 0;
}
PHPBB2
- Código:
.post:hover .post-options {
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
opacity: .5;
}
.post .post-options:hover {
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
opacity: 1!important;
}
.post .post-options {
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
opacity: 0;
}
PHPBB3
- Código:
.postbody:hover .profile-icons {
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
opacity: .5;
}
.postbody .profile-icons:hover {
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
opacity: 1!important;
}
.postbody .profile-icons {
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
opacity: 0;
}
Invision
- Código:
.post:hover .posting-icons {
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
opacity: .5;
}
.post .posting-icons:hover {
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
opacity: 1!important;
}
.post .posting-icons {
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
opacity: 0;
}
Última edição por LucasRPG em Seg 16 Jul 2012, 12:48 am, editado 4 vez(es)