Aumentar o tamanho do banner

4 participantes

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

Tópico resolvido Aumentar o tamanho do banner

Mensagem por smithz0r 28.01.14 16:04

Qual é minha questão:
Como eu faço pra quando eu passar o mouse no banner (logo) que tem no topo, ela aumentar de tamanho?

Endereço do meu fórum:
http://lgn-family.forumeiros.com

Versão do fórum:
PUNBB


Última edição por smithz0r em 28.01.14 17:53, editado 1 vez(es)
smithz0r

smithz0r
**

Membro desde : 10/10/2012
Mensagens : 84
Pontos : 126

http://familiadatp.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Aumentar o tamanho do banner

Mensagem por Konai 28.01.14 16:29

Saudações meu caro!

Aceda à:
Painel de Controle >> Visualização >> Imagens e Cores >> Cores >> Folha de estilo CSS

Adicione este código no início da tua CSS:
Código:
#pun-logo {
width: LARGURApx;
height: ALTURApx;
}
#pun-logo:hover {
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
}

Onde está "LARGURA" apague e coloque o valor da largura da imagem e em "ALTURA" a mesma coisa, e onde está scale(1.5) é quanto a imagem vai crescer.

Não se esqueça de salvar! Positivo

Cordiais saudações! Muito feliz
Konai

Konai
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Aumentar o tamanho do banner

Mensagem por smithz0r 28.01.14 16:41

Sem resultado Triste
Coloquei assim:

Código:
#pun-logo {
width: 350px;
height: 150px;
}
#pun-logo:hover {
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
}
smithz0r

smithz0r
**

Membro desde : 10/10/2012
Mensagens : 84
Pontos : 126

http://familiadatp.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Aumentar o tamanho do banner

Mensagem por Konai 28.01.14 16:45

Estranho...

Substitua os códigos por este aqui:
Código:
.pun img {
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
}

Dokyo. Muito feliz
Konai

Konai
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Aumentar o tamanho do banner

Mensagem por smithz0r 28.01.14 16:52

Ok, peguei esse aí e troquei o .pun img por .pun img:hover, saiu quase o que eu queria...
O que acontece é: Se eu coloco o mouse, a imagem já aumenta de tamanho direto, eu queria meio que um efeito que ela fosse crescendo...

Código tá assim:
Código:
.pun img:hover {
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
}
smithz0r

smithz0r
**

Membro desde : 10/10/2012
Mensagens : 84
Pontos : 126

http://familiadatp.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Aumentar o tamanho do banner

Mensagem por Konai 28.01.14 16:55

Perdoe-me, eu tinha esquecido de colocar o ":hover" no código. No mais, substitua o código atual por este:
Código:
.pun img:hover {
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-webkit-transition: 1s all ease;
}

Feito isto, salve!

Dokyo. Muito feliz
Konai

Konai
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Aumentar o tamanho do banner

Mensagem por smithz0r 28.01.14 16:58

Exatamente o que eu queria! Mas tem jeito de quando tira o mouse ele volta pro tamanho original com o mesmo "efeito"?
smithz0r

smithz0r
**

Membro desde : 10/10/2012
Mensagens : 84
Pontos : 126

http://familiadatp.forumeiros.com

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Aumentar o tamanho do banner

Mensagem por Shek 28.01.14 17:08

Boa tarde!

Dokyo, neste caso quando for o logo, você usa a classe #pun-logo e colocar o :hover, que quer dizer que quando o mouse estiver sobre a imagem, a mesma será afetada.

Tente com este código:
Código:
#pun-logo {
width: 550px;
height: 130px;
}

#pun-logo:hover {
width: 700px;
height: 300px;
}
Pode ser que eu esteja enganado.
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Aumentar o tamanho do banner

Mensagem por smithz0r 28.01.14 17:13

Realmente, agora eu vi, com .pun img:hover, todas as imagens que estiverem no fórum vão aumentar o tamanho quando colocar o mouse em cima.

Shek, seu código não resultou :/
smithz0r

smithz0r
**

Membro desde : 10/10/2012
Mensagens : 84
Pontos : 126

http://familiadatp.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta
  • 0

Tópico resolvido Re: Aumentar o tamanho do banner

Mensagem por Konai 28.01.14 17:17

Saudações!

Realmente Shek, mais o senhor poderá notar que eu tentei com o código CSS do logo e não surtiu efeito, mas vamos tentar novamente!

Tente um desses códigos abaixo, teste um por vez, se um não funcionar, substitua-o pelo o outro.

Código 1:
Código:
#pun-logo {
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
-webkit-transition: 1s all ease;
}
#pun-logo:hover {
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
}

Código 2:
Código:
.pun img {
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
-webkit-transition: 1s all ease;
}
.pun img:hover {
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-webkit-transition: 1s all ease;
}

Não esqueça de salvar! Positivo

Até mais! Muito feliz
Konai

Konai
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Aumentar o tamanho do banner

Mensagem por smithz0r 28.01.14 17:25

--edit
Esqueci de dizer: O de cima não funcionou.
--

Não cara '-' com scale 0 no .pun img, o banner vai sumir. Deixei o código assim:

Código:
.pun img {
-webkit-transition: 1s all ease;
}
.pun img:hover {
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-webkit-transition: 1s all ease;
}

Até aí ok, mas o efeito fica em TODAS as imagens que tem no fórum
smithz0r

smithz0r
**

Membro desde : 10/10/2012
Mensagens : 84
Pontos : 126

http://familiadatp.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Aumentar o tamanho do banner

Mensagem por Konai 28.01.14 17:29

Querido eu sei, não precisa me ensinar CSS(peço que não me leve a mal)!

O ideal seria:
Código:
#pun-logo {
-webkit-transition: 1s all ease;
}
#pun-logo:hover {
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-webkit-transition: 1s all ease;
}

Não entendo o porque do código não funcionar... Triste 

O senhor poderia me fornecer a tua CSS por gentileza?

Dokyo. Muito feliz
Konai

Konai
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Principal Contribuidor
  • 0

Tópico resolvido Re: Aumentar o tamanho do banner

Mensagem por Shek 28.01.14 17:31

Boa tarde!

Tente novamente com este código CSS:
Código:
a#pun-logo img {
width: 550px !important;
height: 130px !important;
}

a#pun-logo img:hover {
width: 700px !important;
height: 300px !important;
}
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Membro Entusiasta
  • 0

Tópico resolvido Re: Aumentar o tamanho do banner

Mensagem por Cream 28.01.14 17:36

Olá,

Tente trocar seu código CSS por este:
Código:
#pun-logo > img:nth-child(1) {
        -webkit-transition: 1s all ease;
        }
#pun-logo > img:nth-child(1):hover {
        -moz-transform: scale(1.5);
        -webkit-transform: scale(1.5);
        -o-transform: scale(1.5);
        -webkit-transition: 1s all ease;
        }

Até mais!
Cream

Cream
Membro Entusiasta
Membro Entusiasta

Membro desde : 15/12/2010
Mensagens : 8540
Pontos : 11644

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Aumentar o tamanho do banner

Mensagem por smithz0r 28.01.14 17:49

Ok, peguei parte do código do Shek e parte do código do Dokyo.

Código do Shek:
Código:
a#pun-logo img {
width: 550px !important;
height: 130px !important;
}

a#pun-logo img:hover {
width: 700px !important;
height: 300px !important;
}
Adicionei -webkit-transition: 1s all ease; abaixo de cada height e o único defeito era que aumentava de fato a imagem, fazia o efeito e tals mas aumentava a imagem e o fórum meio que descia, porém, só fazia essa mudança na imagem do banner. Mas o código do Dokyo não descia o fórum, apenas fazia o efeito que dava impressão de aumento da imagem, só que em todas as imagens do fórum.

Código do Dokyo:
Código:
.pun img {
-webkit-transition: 1s all ease;
}
.pun img:hover {
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-webkit-transition: 1s all ease;
}

Peguei a parte do código do Dokyo, .pun img {, e troquei pela parte do código do Shek, a#pun-logo img {. Ficando assim:

Código:
a#pun-logo img {
-webkit-transition: 1s all ease;
}
a#pun-logo img:hover {
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-webkit-transition: 1s all ease;
}

Ficou exatamente como eu queria.
O código do Cream também funcionou perfeitamente sem precisar editar nada. Obrigado a todos, todos ajudaram.

--edit
REP+ para todos Muito feliz
smithz0r

smithz0r
**

Membro desde : 10/10/2012
Mensagens : 84
Pontos : 126

http://familiadatp.forumeiros.com

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos