Home » Goodies » Imagem em Hover

Esse CSS serve para você ter uma imagem em Hover no seu blog

Exemplo: (Passe o mouse em cima)

Primeiro vamos precisar as imagens que você vai usar.
A 1ª Imagem será a imagem principal e a 2ª a Imagem será o hover. A 1ª Imagem será o link.
Essas são as imagens que eu usei:

1ª Imagem

2ª Imagem

Lembre-se que você precisa saber a altura e largura exata dessas imagens.

Esse é o CSS:

.go {display:block;width:NÚMEROpx;height:NÚMEROpx; background-color:transparent; background-image:url("URL IMAGEM 1"); background-repeat:no-repeat; background-position:top left; }

.go:hover {display:block;width:NÚMEROpx;height:NÚMEROpx; background-color:transparent; background-image:url("URL IMAGEM 2"); background-repeat:no-repeat; background-position:bottom left;}

O “go” pode ser alterado para qualquer nome, apenas tenha certeza de que eles estão iguais.

Para utilizar o hover coloque esse código aonde ele aparece:

<a class="go" href="URL IMAGEM 1 AQUI"></a>

Cada vez que você usar uma imagem diferente para esse código adicione um número nos “go“…Por exemplo “go1″, “go2″ e assim por diante!