Efeito sobre o titulo do fórum

[Nosferatu~]

Qual é minha questão:
Ola, Bom gostaria de adicionar esse efeito ao passar o cursor sobre o titulo do fórum:


Fórum em que vi isso:
http://artelib.forumeiros.com/forum

Agradeço dês de já

Endereço do meu fórum:
http://style-art.forumeiros.com/

Versão do fórum:
PunBB

[Hancki]

Olá!

Use este CSS:

Código:

DIV.maintitle.floated.clearfix {
  font-size: auto;
  -webkit-transition: font-size 1s ease-in;
  -moz-transition: font-size 1s ease-in;
  -o-transition: font-size 1s ease-in;
  -ms-transition: font-size 1s ease-in;
  transition: font-size 1s ease-in;
}
DIV.maintitle.floated.clearfix:hover {
  font-size: 20px;
}

Hancki

[Nosferatu~]

Ola, O Código Não resultou

[Hancki]

Aqui deu, repare: https://i.imgur.com/bNBUTuR.gif
Poderia mandar um print, especificando onde quer que surja o efeito?

Hancki

[Nosferatu~]

Ola, Veja que na imagem o titulo esta centralizado e o fundo preto e branco... , 
Porem o código que me mandou so aumenta o tamanho do texto , se possível quero o efeito em geral 
(Texto Centralizado em bold , colorir a categoria ao passar o cursor e aumento do titulo) :  

[Boster Cheats]

Olá Adicione ao seu CSS:

Código:

.page-title h2:hover {
background: #181818 url(http://s5.postimg.org/wj1z6xt5z/free_floral_vector.png) repeat-x center center!important;
letter-spacing: 1px;
transition: .3s;
}

.page-title h2 {
background: #181818 url(http://s5.postimg.org/taxhtw6w7/image.png) repeat-x center center!important;
border: 1px solid #333;
border-bottom-right-radius: 0!important;
border-radius: 8px!important;
border-top-left-radius: 0!important;
box-shadow: 0 2px 3px #111 inset;
color: #eee;
cursor: pointer!important;
display: block;
font-family: Helvetica, Open Sans, Tahoma!important;
font-size: 14px!important;
font-weight: 700;
padding: 10px!important;
text-shadow: -1px 1px #000!important;
transition: .3s;
}



Valide! Se Ajudei Agradeça.

[Nosferatu~]

Funcionou porem gostaria do titulo centralizado como na imagem...

[Konai]

Saudações!

Substitua o código fornecido por este:

Código:

.page-title h2:hover {
background: #181818 url(http://s5.postimg.org/wj1z6xt5z/free_floral_vector.png) !important;
background-repeat: repeat-x !important;
text-align: center !important;
letter-spacing: 1px;
transition: .3s;
}

.page-title h2 {
background: #181818 url(http://s5.postimg.org/taxhtw6w7/image.png) !important;
background-repeat: repeat-x !important;
text-align: center !important;
border: 1px solid #333;
border-bottom-right-radius: 0!important;
border-radius: 8px!important;
border-top-left-radius: 0!important;
box-shadow: 0 2px 3px #111 inset;
color: #eee;
cursor: pointer!important;
display: block;
font-family: Helvetica, Open Sans, Tahoma!important;
font-size: 14px!important;
font-weight: 700;
padding: 10px!important;
text-shadow: -1px 1px #000!important;
transition: .3s;
}

Salve!

Cordiais saudações!

[Nosferatu~]

Ola, Funcionou ! Mas ficou um fundo azul atrás ... 
Poderia me ajudar a remover ? 

[Alex Habilidade]

Olá,

Para centralizar o titulo adicione em sua folha CSS:

Código:


.maintitle.floated.clearfix {
    text-align: center!important;
}


Alex

[Nosferatu~]

Ola, Funcionou ! Mas ficou um fundo azul atrás ... 
Poderia me ajudar a remover ? 

Ja resolvi a parte do texto mais ainda esta com fundo azul queria remove-lo 

[JScript]

Ola, Funcionou ! Mas ficou um fundo azul atrás ...
Poderia me ajudar a remover ?

Ja resolvi a parte do texto mais ainda esta com fundo azul queria remove-lo

Olá!
Observe a imagem abaixo:


Ela foi retirada diretamente do fórum que você informou no ato da criação do tópico (http://styleart.forumeiros.com), perceba que não há título centralizado, assim como não há o fundo azul atrás dele!

---

Vou tentar lhe explicar a razão de tanta postagem ainda não ter dado certo pra você:
1- Este endereço: http://styleart.forumeiros.com - não condiz com as imagens contendo os códigos adicionados por você, logo fica explícito que este não é o seu fórum e sim um mero fórum de testes!
2- Agora se a versão do seu fórum for diferente do fórum que postou aqui, fica mais difícil pra nós lhe ajudarmos...
3- É essencial e imprescindível que as informações citadas ao criar o tópico reflitam o real na qual você deseja ter sua questão resolvida, com isso evita-se várias postagens desnecessárias e o resultado obtido seria mais rápido.

---

JS

[Nosferatu~]

Aqui esta o endereço original , 
http://style-art.forumeiros.com/
Não havia percebido o endereço de testes pois apenas um " - " o separa do original

[JScript]

@Nemo~
Ok, aqui está o código CSS para remover o "azul":

Código:


.main .main-head {
  padding: 0 !important;
}


Resultado:


Nota: Viu como é imprescindível sabermos onde é que vais aplicar os códigos?

Abraços,

JS

[Nosferatu~]

Obrigado ! 


Funcionou pode fechar! 
Até Mais 

[orlanxd]

ISSO FUNCIONA NA VERSÃO PHPBB3? GOSTEI DESTE EFEITO TAMBÉM