ShiftActif fórum

[TUTORIAL] Aumentando o tamanho da logo com efeito Hover Homepg10

Participe da melhor comunidade sobre fóruns!

Bem vindo [TUTORIAL] Aumentando o tamanho da logo com efeito Hover 405374159 ao fórum de suporte e de informações técnicas ShiftActif. Aqui, solucionamos suas dúvidas sobre os tutoriais exclusivos fornecidos pela nosso subfórum de tutoriais além de suporte opcional ao Forumeiros.com, Blogger e temas grátis do Criarumblog.com! Você encontrará FAQs, astúcias em códigos e efeitos especiais em CSS, Javascript e outros para complementar seu fórum ou Blog!
Venha participar desta grande comunidade!!! [TUTORIAL] Aumentando o tamanho da logo com efeito Hover 1660898911

[TUTORIAL] Aumentando o tamanho da logo com efeito Hover

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[TUTORIAL] Aumentando o tamanho da logo com efeito Hover Empty [TUTORIAL] Aumentando o tamanho da logo com efeito Hover

Mensagem por Make em Seg 31 Dez - 15:43


[TUTORIAL] Aumentando o tamanho da logo com efeito Hover Homepg10

Efeito na Logo
Neste tutorial vamos utilizar um código CSS, que ele deixa a logo um pouco minimizada e depois com o efeito hover é maximizada ou seja aumenta, adquira mais informações a seguir.



--> Tutoriais <--
Aumentando o tamanho da logo com efeito Hover



- Código há ser utilizado:
[TUTORIAL] Aumentando o tamanho da logo com efeito Hover Versio11 Phpbb2
Código:
#i_logo {
transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-webkit-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px);
-moz-opacity: 0.6;
opacity: 0.6;
filter:alpha(opacity=40);
-moz-transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
}
#i_logo:hover {
transition-duration: 1.0s;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 1.0s;
-o-transition-duration: 1.0s;
-webkit-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-moz-opacity: 0.6;
opacity: 1.0;
filter:alpha(opacity=40);
}

[TUTORIAL] Aumentando o tamanho da logo com efeito Hover Versio12 Phpbb3
Código:
#logo img{
transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-webkit-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px);
-moz-opacity: 0.6;
opacity: 0.6;
filter:alpha(opacity=40);
-moz-transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
}
#logo img:hover {
transition-duration: 1.0s;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 1.0s;
-o-transition-duration: 1.0s;
-webkit-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-moz-opacity: 0.6;
opacity: 1.0;
filter:alpha(opacity=40);
}

[TUTORIAL] Aumentando o tamanho da logo com efeito Hover Versio14 Invision
Código:
div#logostrip a img {
transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-webkit-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px);
-moz-opacity: 0.6;
opacity: 0.6;
filter:alpha(opacity=40);
-moz-transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
}
div#logostrip a img:hover{
transition-duration: 1.0s;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 1.0s;
-o-transition-duration: 1.0s;
-webkit-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-moz-opacity: 0.6;
opacity: 1.0;
filter:alpha(opacity=40);
}

[TUTORIAL] Aumentando o tamanho da logo com efeito Hover Versio15 PunBB
Código:
#pun-intro a img{
transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-webkit-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px);
-moz-opacity: 0.6;
opacity: 0.6;
filter:alpha(opacity=40);
-moz-transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
}
#pun-intro a img:hover{
transition-duration: 1.0s;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 1.0s;
-o-transition-duration: 1.0s;
-webkit-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-moz-opacity: 0.6;
opacity: 1.0;
filter:alpha(opacity=40);
}

- Folha CSS:
Agora siga as setas de acordo onde deverá adicionar o código dado acima:
Painel de Controle Seta verde Visualização Seta verde Imagens e cores Seta verde Cores Seta verde Folha de estilo CSS
(carregue na imagem para aumentar)[TUTORIAL] Aumentando o tamanho da logo com efeito Hover 1114

- Resultado:

(carregue na imagem para aumentar)
[TUTORIAL] Aumentando o tamanho da logo com efeito Hover Result12

  • Como retiro o efeito de opacidade?
    Procure pelo code abaixo e o retire:
    -moz-opacity: 0.6;
    opacity: 0.6;
    - Um EXEMPLO no código punbb:
    #pun-intro a img{
    transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px);
    -moz-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px);
    -o-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px);
    -moz-opacity: 0.6;
    opacity: 0.6;

    filter:alpha(opacity=40);
    -moz-transition-duration: 0.8s;
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    }
    #pun-intro a img:hover{
    transition-duration: 1.0s;
    -moz-transition-duration: 0.5s;
    -webkit-transition-duration: 1.0s;
    -o-transition-duration: 1.0s;
    -webkit-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
    -moz-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
    -o-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
    -moz-opacity: 0.6;
    opacity: 1.0;
    filter:alpha(opacity=40);
    }
    Azul Forumeiros: É oque você deve retirar para não ter opacidade.
    Verde Forumeiros: É oque você deve deixar para que o efeito ocorra na logo.






© ShiftActif


[TUTORIAL] Aumentando o tamanho da logo com efeito Hover Faq10 Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:[Dúvida] Aumentando o tamanho da logo com efeito Hover
Make

Make
Membro em destaque

Masculino
Idade : 19
PointActif's : 2895
ReputActifs : 5
Mensagens : 196
Inscrição : 25/06/2012

Localização : Fortaleza-CE
100%

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum