Aumentar o tamanho do banner

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

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!

Cordiais saudações!

Sem resultado
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);
}

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.

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

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.

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

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.

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

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!

Até mais!

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

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

O senhor poderia me fornecer a tua CSS por gentileza?

Dokyo.

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

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!

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