Criar efeito sobreposição de imagem (a imagem muda quando passa mouse)

Como criar uma efeito de mudar a imagem quando passar o mouse

sempre que vou fazer algo procuro na internet e sem acho oque quero mas sempre com códigos imensos e poucos deles cumprem oque promete, então estou refazendo o código do meu template e mudando algumas funções que usam quase 1000 linhas de código pra fazer uma coisa que em 2 linhas resolve o problema então vou deixa um mini tutorial de como fazer o efeito maousehover,
quando passar o mouse a imagem muda de cor ou muda para outra imagem, isso vai da sua imaginação criatividade. vamos para to tutorial;

  • Demonstração: antes de continuar veja o efeito mousehover abaixo.


1º Passo: Copie o código a baixo e mude conforme descrito no código.

<a href="URL DESTINO DA IMAGEM "><img src="URL DA PRIMEIRA IMAGEM AQUI" onmouseover="this.src='URL DA SEGUNDA IMAGEM AQUI'" onmouseout="this.src='URL DA PRIMEIRA IMAGEM AQUI'" /></a>

2º Passo: Agora você pode colar a sua imagem dentro de um gadget blog, indo para Layout> clique em Adicionar um link Gadget (lado direito)> Select HTML / JavaScript na janela pop-up, em seguida, adicioná-lo à sua barra lateral, e testar.

feito isso está pronto, agora use a imaginação para criar os seus próprio botões personalizados.

Espero que esse tutorial seja útil!  Expresse sua opinião, comente e tire suas duvidas...
                         SIGA @DicasBlogger.net agora e mantenha-se mais atualizado!

Recomendamos que leia também