Aumentar o tamanho do banner

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

Resolvido Aumentar o tamanho do banner

Mensagem por smithz0r em 28/01/14, 02:04 pm

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, 03:53 pm, editado 1 vez(es)
avatar

smithz0r
Nível 7

Masculino
Inscrito dia : 10/10/2012
Mensagens : 84
Pontos Ativos : 126

Ver perfil do usuário http://familiadatp.forumeiros.com

Resolvido Re: Aumentar o tamanho do banner

Mensagem por Gaaratsu em 28/01/14, 02:29 pm

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
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 6005
Pontos Ativos : 7504

Ver perfil do usuário http://narutongo.forumeiros.com/

Resolvido Re: Aumentar o tamanho do banner

Mensagem por smithz0r em 28/01/14, 02:41 pm

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);
}
avatar

smithz0r
Nível 7

Masculino
Inscrito dia : 10/10/2012
Mensagens : 84
Pontos Ativos : 126

Ver perfil do usuário http://familiadatp.forumeiros.com

Resolvido Re: Aumentar o tamanho do banner

Mensagem por Gaaratsu em 28/01/14, 02:45 pm

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


Bem-vindo(a) ao Fórum dos Fóruns Convidado!
Leia as Regras do Fórum dos Fóruns (FDF) e o Regulamento do setor de Suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Gaaratsu — Ajudeiro
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 6005
Pontos Ativos : 7504

Ver perfil do usuário http://narutongo.forumeiros.com/

Resolvido Re: Aumentar o tamanho do banner

Mensagem por smithz0r em 28/01/14, 02:52 pm

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);
}
avatar

smithz0r
Nível 7

Masculino
Inscrito dia : 10/10/2012
Mensagens : 84
Pontos Ativos : 126

Ver perfil do usuário http://familiadatp.forumeiros.com

Resolvido Re: Aumentar o tamanho do banner

Mensagem por Gaaratsu em 28/01/14, 02:55 pm

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


Bem-vindo(a) ao Fórum dos Fóruns Convidado!
Leia as Regras do Fórum dos Fóruns (FDF) e o Regulamento do setor de Suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Gaaratsu — Ajudeiro
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 6005
Pontos Ativos : 7504

Ver perfil do usuário http://narutongo.forumeiros.com/

Resolvido Re: Aumentar o tamanho do banner

Mensagem por smithz0r em 28/01/14, 02:58 pm

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

smithz0r
Nível 7

Masculino
Inscrito dia : 10/10/2012
Mensagens : 84
Pontos Ativos : 126

Ver perfil do usuário http://familiadatp.forumeiros.com

Resolvido Re: Aumentar o tamanho do banner

Mensagem por Shek em 28/01/14, 03:08 pm

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 CrowleyAdmineiro - Fórum dos Fóruns

Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 17161
Pontos Ativos : 21418

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Aumentar o tamanho do banner

Mensagem por smithz0r em 28/01/14, 03:13 pm

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 :/
avatar

smithz0r
Nível 7

Masculino
Inscrito dia : 10/10/2012
Mensagens : 84
Pontos Ativos : 126

Ver perfil do usuário http://familiadatp.forumeiros.com
  • 0

Resolvido Re: Aumentar o tamanho do banner

Mensagem por Gaaratsu em 28/01/14, 03:17 pm

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


Bem-vindo(a) ao Fórum dos Fóruns Convidado!
Leia as Regras do Fórum dos Fóruns (FDF) e o Regulamento do setor de Suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Gaaratsu — Ajudeiro
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 6005
Pontos Ativos : 7504

Ver perfil do usuário http://narutongo.forumeiros.com/

Resolvido Re: Aumentar o tamanho do banner

Mensagem por smithz0r em 28/01/14, 03:25 pm

--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
avatar

smithz0r
Nível 7

Masculino
Inscrito dia : 10/10/2012
Mensagens : 84
Pontos Ativos : 126

Ver perfil do usuário http://familiadatp.forumeiros.com

Resolvido Re: Aumentar o tamanho do banner

Mensagem por Gaaratsu em 28/01/14, 03:29 pm

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
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 6005
Pontos Ativos : 7504

Ver perfil do usuário http://narutongo.forumeiros.com/
  • 0

Resolvido Re: Aumentar o tamanho do banner

Mensagem por Shek em 28/01/14, 03:31 pm

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 CrowleyAdmineiro - Fórum dos Fóruns

Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 17161
Pontos Ativos : 21418

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif
  • 0

Resolvido Re: Aumentar o tamanho do banner

Mensagem por Cream em 28/01/14, 03:36 pm

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!
avatar

Cream
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 15/12/2010
Mensagens : 8540
Pontos Ativos : 11636

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Aumentar o tamanho do banner

Mensagem por smithz0r em 28/01/14, 03:49 pm

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
avatar

smithz0r
Nível 7

Masculino
Inscrito dia : 10/10/2012
Mensagens : 84
Pontos Ativos : 126

Ver perfil do usuário http://familiadatp.forumeiros.com

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