Colocando bordas hover nas imagens do blog

Yo! Ainda na maratona de tutoriais da semana trago um efeito bem maneirooooo! Ele e serve para colocar bordinhas em volta das imagens que ao passar o mouse ela muda de cor (hover) e a imagem fica com efeito de opacidade. Mas esse efeito só funciona nas imagens que você adicionar um código, apenas nas imagens que você desejar. E então vamos tentar?

1. Procure em seu HTML por ]]></b:skin>, acima dessa tag você cola

Códigos

.efeitoimagem {
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
border: 3px solid #FF81C0; /*cor de borda*/
}
.efeitoimagem:hover {
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
opacity: .6; /*opacidade*/
border: 3px solid #41EAD9; /*cor da borda hover*/
}

2. E salve! Agora vá para seu layout e abra um gadget HTML/Java Script, e dentro cole o próximo código

Códigos

<img src="URL da imagem" class="efeitoimagem"/></a>

Agora e só salvar e visualizar como ficou, espero que tenham gostado! Eu peguei esse tutu no blog Miki Candy todos os creditos vão para ela! Visitem! Vão amar.