Efeito Hover na borda das Imagens

Olá pessoal! Hoje vou ensinar a colocar efeito Hover (o efeito que muda quando passa o mouse) nas imagens do blog que nem no Template Candy Shop.

O resultado é esse:

Imagem normal                                                Quando passa o mouse

:




Vamos ao tutorial:

1- Vá no HTML do seu blog, aperte CTRL+F e procure por:

/* Posts
----------------------------------------------- */

2- ABAIXO disso, cole:

.post img:hover{
  padding:10px; /* -- espaço da borda --*/
  background: #997D94; /*-- cor de fundo --*/
  -moz-border-radius: 10px; /* -- borda arredondada --*/
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -khtml-border-radius: 10px;
  border-top: 1px solid #f2c5f0; /* -- borda de cima -- */
  border-left: 1px solid #f2c5f0; /* -- borda da esquerda -- */
  border-right: 1px solid #f2c5f0; /* -- borda da direita -- */
  border-bottom: 1px solid #be98cc; /* -- borda de baixa */
  }

 Se quiser borda antes de passar o mouse:

.post img {
  padding:10px;
  background: #997D94;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -khtml-border-radius: 10px;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #d6d6d6;
  }

Se quiser, mude também as propriedades da borda, como dashed, dotted, etc.

Espero que tenham gostado!!