Efeito hover no menu

[King Gz;]

Qual é minha questão:
Olá,

Vi em alguns foruns aqueles botões fórum, portal, faq etc .. que ao você passar o mouse por cima a imagem ganha um brilho, ou seja, outra imagem.

Queria muito saber como se faz isto, grato.

Medidas que eu tomei para corrigir o problema:
-

Imagens do meu problema:
-

Endereço do meu fórum:
https://ajuda.forumeiros.com/forum

Versão do meu fórum:
PHPBB2

[Convidado]

É um efeito de opacidade. '-'
Veja: https://ajuda.forumeiros.com/t15695-tutorial-efeito-de-opacidade-nas-imagens-do-menu
PS: N tenho ctz ctz que é esse..

[Cream]

Olá,

Você poderá utilizar o seguinte código:

a.mainmenu:hover {
background-image: url('link-da-imagem');
}

Violeta -> Troque pelo link da imagem ao passar o mouse. Adicione o código em:
Painel... -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS

Até mais!

[King Gz;]

Olá Cream,

Não entendi muito bem este código, eu adicionei isto e a imagem na folha de estilo css, o que aconteceu foi que a imagem que eu coloquei neste código apareceu por de baixo dos outros botões, como faço para substituir a imagem ao passar o mouse? E como coloco uma imagem para substituir cada botão, ou seja, uma substituindo o forum, outra substituindo o portal, etc ..

[Cream]

Olá!

Veja as classes CSS ligadas à cada imagem do menu:

#i_icon_mini_index { Corresponde à imagem início/Fórum.
#i_icon_mini_portal { Corresponde à imagem portal.
#i_icon_mini_calendar { Corresponde à imagem calendário.
#i_icon_mini_faq { Corresponde à imagem Faq/Perguntas e respostas criadas por si no painel de controle.
#i_icon_mini_search { Corresponde à imagem buscar.
#i_icon_mini_index { Corresponde à imagem início/Fórum.
#i_icon_mini_members { Corresponde à imagem de membros do fórum.
#i_icon_mini_groups { Corresponde à imagem grupos.
#i_icon_mini_profile { Corresponde à imagem perfil.
#i_icon_mini_message { Corresponde à imagem do link do menu MP.
ul.navlinks span.new-message { Corresponde à imagem do link do menu Nova MP.
#i_icon_mini_logout { Corresponde à imagem do link do menu Sair.
i_icon_mini_login { Corresponde à imagem do link do menu Login/Entrar.
i_icon_mini_register { Corresponde à imagem do link do menu Registrar/Cadastrar.

Agora para colocar uma imagem para exibir quando passar o mouse em cima do link veja:

#i_icon_mini_message:hover {
background-image: url(Endereço_da_sua_imagem);
}

Isso acima é um exemplo, deverá ser modificado a parte "#i_icon_mini_message", dependendo da escolha das classes.

O código depois de produzido, deverá ser adicionado em:
Painel de controle Visualização Imagens e cores Cores / Folha estilo CSS

Confirme se ainda necessita de suporte adicional

Até mais!

[King Gz;]

Agora ficou bem esclarecido

Mais a imagem que no caso iria por cima na hora de passar o mouse ficou por baicho, como arrumo isto? rsrs

[Cream]

Agora ficou bem esclarecido

Mais a imagem que no caso iria por cima na hora de passar o mouse ficou por baicho, como arrumo isto? rsrs

Olá amigo,

Poderia me esclarescer o que houve?
Se puder me apresentar uma imagem...

Até mais!

[King Gz;]

Creio que não seja necessário uma imagem, tentarei explicar

Eu fiz o teste, peguei a imagem do portal e coloquei para substituir a do forum ao passar o mouse, e a imagem não modificou, apenas ficou um pouquinho mais claro e deu para ver que o botão portal ficou por baixo do botão Forum.

Queria saber como faz para colocar por cima ao passar a mouse entende? rsrs

[Cream]

Olá,

Tente com este código:

Código:

CLASSE:hover {
background-image: url(Endereço_da_sua_imagem) !important;
position: fixed !important;
}

Troque "Endereço_da_sua_imagem" pelo link de sua imagem que vai aparecer no modo hover. E troque "Classe" pela classe que receberá o hover nos ícones. Adicione o código em:
Painel... -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS

Até mais!

[King Gz;]

Fiz a mesma coisa que antes, coloquei a imagem do portal para aparecer no botão 'forum', o que aconteceu foi que o portal apareceu mais o 'forum' apareceu por baixo e o botão portal desapareceu.

[King Gz;]

Up's

[DarkDoki]

Ai Me ajudou Mt Tbm vlw

[henriquebr]

ESSE TOPICO JÁ EXISTE! USE O SISTEMA DE BUSCA ANTES DE PERGUNTAR!
https://ajuda.forumeiros.com/t47554-botoes-do-menu-com-imagem-hover

[King Gz;]

ESSE TOPICO JÁ EXISTE! USE O SISTEMA DE BUSCA ANTES DE PERGUNTAR!
https://ajuda.forumeiros.com/t47554-botoes-do-menu-com-imagem-hover

Ja fiz este procedimento no qual não deu o efeito que queria, por isto abri este tópico!

[webpixel]

São duas imagens
Uma normal e outra com mais brilho
Tente colocar isso
Tipo um .gif

[Oto!]

Olá henriquebr!

Tenha mais respeito com os membros deste fórum, sua mensagem foi um pouco grosseira, não utilize na mensagem inteira em letra maiúscula. Conte como uma advertência.

Abraços!

[Konai]

Olá,

Código:

CLASSE:hover;mouse.effect; {
background-image: url(Endereço_da_sua_imagem) !important;
position: fixed !important;
}

Tente este.

[henriquebr]

Olá henriquebr!

Tenha mais respeito com os membros deste fórum, sua mensagem foi um pouco grosseira, não utilize na mensagem inteira em letra maiúscula. Conte como uma advertência.

Abraços!

opa, oks, nao quis ser grosseiro, é pq na hora em que respondi meu caps tava ligado xD

[Konai]

Olá henriquebr!

Tenha mais respeito com os membros deste fórum, sua mensagem foi um pouco grosseira, não utilize na mensagem inteira em letra maiúscula. Conte como uma advertência.

Abraços!

opa, oks, nao quis ser grosseiro, é pq na hora em que respondi meu caps tava ligado xD

Olá,

De qualquer forma, a sua linguagem, a maneira que escreveste, deu está impressão. De qualquer forma, todos nós temos dúvidas, e devemos tira-las, já que aqui é um suporte à dúvidas do serviço Forumeiros e Você.

[webpixel]

Vou usar o codigo ali , vaaaleu
Me ajudou tambem