Como criar efeito hover

como eu faço pra imagem mudah qdo eu passo o mouse em cima ?
um cara me deu um código q faz a imagem(as imagem q fica em cima, inicio, portal e etc) do portal muda, + eu qria as outras tb, como eu faço isso ?

o código q ele mandoh é assim:

Código:

#i_icon_mini_portal {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/portal15.png);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_portal:hover {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/portal17.png);
padding: 30px 80px;
background-repeat: no-repeat;
}


Olá loberto, seja bem-vindo a comunidade Forumeiros!

Poderei criar o código correcto, mas onde deseja aplicar esse efeito?
Será no menú de navegação do fórum?

Att, Needke

---

Boa noite e Seja bem-vindo ao FdF,

Como você acabou de se inscrever é importante que você esteja informado das nossas regras. Veja aqui alguns links importantes a saber :

• Regras do Fórum, e o que você não deve fazer neste fórum
  
• Regras básicas do fórum
  
• Regras sobre a elaboração de um tópico
  
• Lista de Questões e respostas freqüentes
  
• Lista de Tutoriais e astúcias
  
• A função Busca
  
• A FAQ de Forumeiros

Olá loberto,

todos os outros códigos que você quer só mudam a classe, aqui estão eles:

Início:

Código:

#i_icon_mini_index {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/inicio14.png);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_index:hover {
background-image: url(Link da Imagem);
padding: 30px 80px;
background-repeat: no-repeat;
}

FAQ:

Código:

#i_icon_mini_faq {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/faq10.png);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_faq:hover {
background-image: url(Link da Imagem);
padding: 30px 80px;
background-repeat: no-repeat;
}

Buscar:

Código:

#i_icon_mini_search {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/buscar10.png);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_search:hover {
background-image: url(Link da Imagem);
padding: 30px 80px;
background-repeat: no-repeat;
}

Grupos:

Código:

#i_icon_mini_groups {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/grupos10.png);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_groups:hover {
background-image: url(Link da Imagem);
padding: 30px 80px;
background-repeat: no-repeat;
}

Registrar:

Código:

#i_icon_mini_register {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/regist10.png);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_register:hover {
background-image: url(Link da Imagem);
padding: 30px 80px;
background-repeat: no-repeat;
}

Login:

Código:

#i_icon_mini_login {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/login10.png);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_login:hover {
background-image: url(Link da Imagem);
padding: 30px 80px;
background-repeat: no-repeat;
}

Editar Perfil:

Código:

#i_icon_mini_profile {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/bolinh10.png);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_profile:hover {
background-image: url(Link da Imagem);
padding: 30px 80px;
background-repeat: no-repeat;
}

Mensagem Privada:

Código:

#i_icon_mini_message {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/mensag12.png);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_message:hover {
background-image: url(Link da Imagem);
padding: 30px 80px;
background-repeat: no-repeat;
}

Obs: Você deve alterar os links do campo "background-image" das classes ":hover"

Já sabes onde adicionar certo?

Ascenda: Painel de Controle Visualização Imagens e Cores Cores Aba//Folha de Estilo CSS

Pegue o código, copie e cole na áre do código e depois clique em Validar.

Espero que seja isto o que procuras.
Até Mais.

eu qria coloca pra qdo colocah o mouse a imagem dessa parte mudar ↓↓↓↓

como eu faço isso com tds ?
eu só cusigui fazeh com o portal

é isso msm spoiler, mto obrigado
vou ver se funciona

loberto escreveu:é isso msm spoiler, mto obrigado
vou ver se funciona

Não há de que, sempre que posso ajudo.
Qualquer problema ou dúvida pode perguntar aqui mesmo.

Até Mais.

só ta faltando o de alguns
calendario, nova mensagem e sair
apenas esses
os q vc mandoh eu cusigui

tambem queria saber o resto ^^

Olá,
Calendário :

Código:

#i_icon_mini_calendar {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/login10.png);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_calendar:hover {
background-image: url(Link da Imagem);
padding: 30px 80px;
background-repeat: no-repeat;
}

Sair :

Código:

#i_icon_mini_logout {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/login10.png);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_logout:hover {
background-image: url(Link da Imagem);
padding: 30px 80px;
background-repeat: no-repeat;
}

Nova mensagem :

Código:

#i_icon_mini_new_message {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/login10.png);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_new_message:hover {
background-image: url(Link da Imagem);
padding: 30px 80px;
background-repeat: no-repeat;
}

Resultou ?
Até mais.

opa. muito bom
grato cara o/