[TUTORIAL] Efeito hover no Logo
ShiftActif fórum :: Central ShiftActif :: :: Tutoriais
Página 1 de 1 • Compartilhe
[TUTORIAL] Efeito hover no Logo
Efeito na Logo |
O tutorial está disponibilizando um efeito hover na logo que após passa o mouse sobre o mesmo o a logo fica em seu estado normal. Confira os passos abaixo.
--> Tutoriais <--
Efeito Hover na Logo
Efeito Hover na Logo
1º - Adicionando código á Folha CSS:
Para adicionar o efeito vá em: Painel de Controle Visualização Imagens e Cores Cores Folha de Estilo CSS.
PHPBB3
- Código:
#logo:hover {
border: none;
filter: alpha(opacity=100);
moz-opacity: 1.0;
opacity: 1.0;
}
#logo {
border: none;
filter: alpha(opacity=50);
moz-opacity: .60;
opacity: .50;
-webkit-transition-duration: .50s;
}
PHPBB2
- Código:
img#i_logo:hover{
border: none;
filter: alpha(opacity=100);
moz-opacity: 1.0;
opacity: 1.0;
}
img#i_logo{
border: none;
filter: alpha(opacity=50);
moz-opacity: .60;
opacity: .50;
-webkit-transition-duration: .50s;
}
PUNBB
- Código:
#pun-intro a img:hover{
border: none;
filter: alpha(opacity=100);
moz-opacity: 1.0;
opacity: 1.0;
}
#pun-intro a img {
border: none;
filter: alpha(opacity=50);
moz-opacity: .60;
opacity: .50;
-webkit-transition-duration: .50s;
}
INVISION
- Código:
div#logostrip a img:hover{
border: none;
filter: alpha(opacity=100);
moz-opacity: 1.0;
opacity: 1.0;
}
div#logostrip a img {
border: none;
filter: alpha(opacity=50);
moz-opacity: .60;
opacity: .50;
-webkit-transition-duration: .50s;
}
2º - Resultado:
Clique aqui para visualizar o efeito.
(carregue na imagem para aumentar)
© ShiftActif & Make
Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Efeito hover no logo |
Tópicos semelhantes
» [TUTORIAL] Aumentando o tamanho da logo com efeito Hover
» [TUTORIAL] Efeito hover em caixa de texto com CSS
» [TUTORIAL] Opacidade e Efeito Hover em Avatar
» [TUTORIAL] Efeito hover o menu do fórum
» [TUTORIAL] Efeito hover nos números de mensagens e tópicos (Phpbb3)
» [TUTORIAL] Efeito hover em caixa de texto com CSS
» [TUTORIAL] Opacidade e Efeito Hover em Avatar
» [TUTORIAL] Efeito hover o menu do fórum
» [TUTORIAL] Efeito hover nos números de mensagens e tópicos (Phpbb3)
ShiftActif fórum :: Central ShiftActif :: :: Tutoriais
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|