Trocar imagem ao passar o mouse + Flechas de navegação

Foto por João Silas

Boa tarde, tudo bem com vocês? Eu tinha achado há um tempinho como por imagens em hover, como a do efeito do logo do So Kawaii. Testei e vi que funciona em qualquer parte, o mesmo código pode ser usado para Leia Mais, Tags dos Posts (como estou ensinando) e em outros lugares, até mesmo num Link-Me.

Então, para o tutorial, preparei diversas imagens para posts para vocês! Espero que vocês gostem, todas estão no formato de 50x50. Caso vocês queiram fazer uma edição de opacidade, para o tutorial, no Photoshop vocês podem apertar ctrl+u e ir mexendo no lightness (que é a opacidade) e hospedar. Veja o resto do post para conferir as imagens e o tutorial:


Imagens de Antigas e Recentes:

1 2 3 4 5 6 7 8

9 10 11 12 13 14 15 16

21 22 23 24 25 26 27 28

29 30 31 32 33 34 35 36

Untitled 1 Untitled 1 Untitled 2 Untitled 2 Untitled 3 Untitled 3 Untitled 4 Untitled 4

Untitled 5 Untitled 5 Untitled 6 Untitled 6 Untitled 7 Untitled 7 Untitled 8 Untitled 8


Imagens para Início:

h1 h2 h3 h4 h5 h6 h7 h8

h11 h12 h13 h14 h15 h16 h17 h18

h31 h32 h33 h34 h35 h36 h37 h38

h41 h42 h43 h44 h45 h46 h47 h48

Tutorial Hover:


Substitua pelo código a seguir as respectivas tags do blogger. Lembrando que: deve-se substituir o http://URL_DA_IMAGEM pelo link que ela vai mostrar normalmente e http://URL_DA_IMAGEM_HOVER pelo link da imagem em hover (quando se passa o mouse).

   



Substituindo os códigos a seguir:

Recentes:
   


Início:
   


Antigas:
   



Aqui continuo com a enquete dos presentinhos de metas (450 e 500 seguidores):


É só isso por hoje, quem sabe apareço mais tare trazendo mais alguma coisa, né? Beijos a todos vocês