Tutorial: Hover no fundo de Imagens

Hey! A essas horas da noite e eu postando, me senti muito culpada por não postar a quantidade correta :P

Então, já viram aqueles blogs, que quando você passa o mouse por cima de uma imagem, o fundo dela muda? Então, trouxe um tuto explicando como fazer! Aqui está o preview (na imagem da postagem). Vejam como o png da banda fica opaco e o fundo se move. Vou ensinar!

1) Vá a Modelo > Editar HTML.

2) Procure por:

]]></b:skin>

3) Acima do código cole:

a img {
-moz-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-moz-transition-duration: 1s;
-webkit-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-webkit-transition-duration: 1s;
-o-transition-property: background-position, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-o-transition-duration: 1s;
background: url(http://pt.upphotos.net/wallpapers/2013/02/Fundo-Textura-Pattern-Cora%C3%A7%C3%A3o-485x728.jpg);
padding: 3px;
}
a:hover img {
-moz-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-moz-transition-duration: 1s;
-webkit-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-webkit-transition-duration: 1s;
-o-transition-property: background-position, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-o-transition-duration: 1s;
background-position: bottom;
-webkit-filter: grayscale(0%);
box-shadow: 0px 0px 30px #fff;
}
.post img {-moz-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-moz-transition-duration: 1s;
-webkit-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-webkit-transition-duration: 1s;
-o-transition-property: background-position, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-o-transition-duration: 1s;
background: url(http://pt.upphotos.net/wallpapers/2013/02/Fundo-Textura-Pattern-Cora%C3%A7%C3%A3o-485x728.jpg);
padding: 4px;
box-shadow: 0px 0px 10px #fff;
}
.post img:hover {
-moz-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-moz-transition-duration: 1s;
-webkit-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-webkit-transition-duration: 1s;
-o-transition-property: background-position, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-o-transition-duration: 1s;
background-position: bottom;
-webkit-filter: grayscale(0%);
opacity:.50;
filter: alpha(opacity=50);
box-shadow: 0px 0px 5px #fff;
}

O código é extenso, pois está incluida a opção de a primeira foto da postagem ter um fundo diferente. As partes em vermelho são os URL's do background.

BONUS!

Trouxe poucos backs pra vocês usarem neste tuto, ok?

1o:

Gostaram? Comentem!