Incluir Efeito Hover em Bordas nas Imagens do Blog

O efeito Hover em Bordas, muda a aparência de um item quando passamos o mouse em cima dele.
Usando CSS no Blogger, você pode adicionar estilos diferentes para suas imagens, inclusive adicionar bordas com efeito hover em determinadas imagens ou banners, para isto basta definir estilos aos elementos, incorporando-os no CSS do seu template.

Veja a seguir alguns exemplos de imagens com efeito hover na borda:

Para ativar o efeito do exemplo 1:
Vá no menu “modelo” >> Editar HTML , não precisa clicar em “Expandir modelos de widgets”,e acrescente uma nova ‘class’. Copie o código abaixo e cole-o ANTES da tag ]]></b:skin>

.border1 img{
padding: 5px;
background: #ffffff; /*Edite a cor de fundo*/
border: 1px solid #54692A; /*Edite a cor de borda*/
}
.border1 img:hover {
padding: 2px;
background:#FFFFFF; /*Edite a cor de fundo*/
border: 4px double #9C192A; /*Edite a cor de borda*/
}

Para ativar o efeito do exemplo 2:
Vá no menu “modelo” >> Editar HTML , não precisa clicar em “Expandir modelos de widgets”,e acrescente uma nova ‘class’. Copie o código abaixo e cole-o ANTES da tag ]]></b:skin>

.border1 img{
padding:3px 4px;
list-style:none;
display:block;
overflow:hidden;
margin:2px 2px 2px;
}
.border1 img:hover {
padding:3px 4px;
list-style:none;
display:block;
overflow:hidden;
background:#8B795E; /*Edite a cor de fundo*/
border:3px solid #000000; /*Edite a cor de borda*/
margin:2px 2px 2px;
}

Cada vez que quiser adicionar o efeito hover em bordas em alguma imagem é necessário que você hospede as imagens que irá utilizar.
Feito isto, você precisará aplicar as propriedades a cada imagem, separadamente, e deverá acrescentar uma condicional no local onde você quer que o efeito se aplique.
Você pode aplicar este efeito nas imagens que quiser: em alguma banner na sidebar, ou nos posts, ou em banners no footer.
Por exemplo: para aplicar este efeito em uma imagem na sidebar, no modo “adicionar gadget” , escolha o tipo “html/javascript” e acrescente o código:

<div class="border1"><img src="URL-DA-IMAGEM"/></div>

Aplicar o efeito a todas as imagens dos posts automaticamente

Se quiser aplicar este efeito hover nas bordas das imagens dos posts, basta incluir os códigos com os estilos CSS, desta forma:

.post-body img{
padding:3px 4px;
list-style:none;
display:block;
overflow:hidden;
margin:2px 2px 2px;
}
.post-body img:hover {
padding:3px 4px;
list-style:none;
display:block;
overflow:hidden;
background:XXXXXX; /*Coloque a cor de fundo*/
border:3px solid #XXXXXX; /*Coloque a cor de borda*/
margin:2px 2px 2px;
}

Use a imaginação e boa sorte!