Maratona de Tutoriais, Último dia - Efeito em imagens

Oiiii minhas amorinhas =D  Antes de começar o tuto quero dizer que hoje é oúltimo dia da maratona   ='(    , mas daqui a algum tempo vai ter a Maratona de Goodies, não perca fique ligada(o) .  Bom vamos ao tuto, vou ensinar a : 

Imagem que muda ao passar o mouse, efeito opacidade nas imagem 2 jeitos e borda nas imagens da postagem ! 

Créditos aos blog :  Cute World   Coisas de Garotas   e  Material - Extra

Imagem que ao passar o mouse ela muda

Para isso use o código abaixo :

<img src="URL da imagem" onmouseover="this.src='URL da imagem ao passar o mouse'; return true" onmouseout="this.src='URL da primeira imagem'">

Onde está URL da imagem, troque pelo url da imagem quando o mouse não estiver por cima dela e onde está: URL da imagem ao passar o mouse   Você troca pela imagem de quando o mouse estiver por cima dela
e onde está : URL da primeira imagem   Coloque o URL da 1° imagem de quando o mouse não está por cima.

Resultado :
Créditos da imagem abaixo aqui



Efeito opacidade nas imagens 2 jeitos

Vá em Design > Editar HTML > Dê CTRL + F e procure por : ]]></b:skin>
Se você quiser que a imagem fique normal e quando o mouse passa por cima e dá o efeito cole acima dessa tag o código abaixo :     (Obs : Não testei nenhum dos dois, se não der certo, aí já não é comigo)

.main img {
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
}
.main img:hover {
filter:alpha(opacity=82);
-moz-opacity:0.82;
opacity:0.82;
}

E se você quiser que a imagem já venha com o efeito e quando o mouse passa por cima ela volta ao normal cole acima da tag  ]]></b:skin>  cole o código abaixo :

.main img {

filter:alpha(opacity=82);
-moz-opacity:0.82;
opacity:0.82;
}

.main img:hover {
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
}

Borda nas imagens das postagens

Para adicionar bordas nas imagens das postagens Vá em design > Editar HTML > Dê CTRL + F e procure por :    ]]></b:skin>   e acima desta tag cole o código abaixo :

.post img{
border: 3px solid  #000000;
padding: 2px;}
.post a:hover img{
border: 3px solid  #FFFFFF;
}

 É bom saber, .post img é a cor da borda e .post a:hover img , é quando
o mouse passa por cima, em roxo altere as cores usando a  tabela,
em verde a espessura da borda, em azul, o formato dela exemplos, e em
vermelho a distancia que a borda ficará da imagem.
(OBS : Não testei, peguei este tuto do Material Extra, mas acho que a Karoline de lá testou)

Gente por hoje , é só Bjos no ♥