Imagem levantando ao passar o mouse

Yo!!! Como vão todos? Espero de todo coração que bem. Hoje venho trazer um tutorial bem simples, sério simples mesmo. Apesar de ser um pouco antigo, sempre aguça a curiosidade dos iniciantes no blogger. Então dedico essa postagem a vocês que está começando. Hoje vou ensinar como fazer o efeito da imagem levantando (um pouco) ao passar o mouse sobre ela. É um detalhe bem simples, mas que dá um charminho a aqueles que gostam de deixar o blog enfeitado, sem deixar a aparência pesada. 

Brevia do efeito

Vou ensinar como adicionar o efeito nas imagens da postagem, e também nas imagens da sidebar ou... apenas nas imagens que deseja que o efeito apareça. Então prontos? Vamos lá!

Aplicando o efeito:

Certo vamos começar! Mas antes escolha o local qual deseja adicionar o efeito, para isso role a baixa mais para baixo e escolha uma das opções. Em seguida vá até o HTML do seu blog, clique dentro da área do código e ative a pesquisa selecionando Ctrl+F, agora pesquise por  ]]></b:skin>, assim que achar acima dele cole o código abaixo:

Aplicando nas imagens da postagem:

.post img{position:relative}

.post img:hover{top:-2px;box-shadow:0 2px 2px #666;}

Aplicando nas imagens da sidebar:

.sidebar img{position:relative}
.sidebar  img:hover{top:-2px;box-shadow:0 2px 2px #666;}

Aplicando em todas as imagens do blog:

.img{position:relative}
.img:hover{top:-2px;box-shadow:0 2px 2px #666;}

Nada difícil não é mesmo?

Aplicando em imagens especificas:

1) Agora é um cadinho diferentes... Vá até o HTML do seu blog, clique dentro da área do código e ative a pesquisa selecionando Ctrl+F, agora pesquise por  ]]></b:skin>, assim que achar acima dele cole o código abaixo:

#teste{position:relative}

#teste:hover{top:-2px;box-shadow:0 2px 2px #666}

Se quiser simplificar, para browsers mais velhos, basta usar um border no lugar do shadow:

#teste{position:relative}

#teste:hover{top:-2px;border-bottom:2px solid #999}

2) Vá em Layout e abra um novo  Gadget Java/Script  e dentro cole:

<img src="imagem.png" id="teste">

É isso! Viu nada difícil, não é? Qualquer duvida é só deixar um comentário. Até aproxima bye bye~