Bordas Coloridas da Área de Post e Sidebar com efeito Hover

Bom postei anteriormente como colocar bordas coloridas na área de post e na sidebar. Agora irei ensinar a como colocar o efeito hover nessas bordas.

Antes de tudo estejam cientes que esta é a continuação do tutorial citado acima, ou seja, terá que ter seguido-o para este tutorial dar certo. 
Vejam abaixo o resultado:

Área de post

(clique na imagem para amplia-la)
Sidebar

(clique na imagem para amplia-la)

Gostaram?...Então vamos começar...

Área de post

1. Aperte 'F3' e procure por '/* PERSONALIZAÇÃO DA ÁREA DE POST */'
2. Acima de '/* PERSONALIZAÇÃO DA ÁREA DE POST */' cole o código abaixo

.post-outer:hover {
border-top: 5px solid #000; /*cor da borda de cima*/
border-bottom: 5px solid #000; /*cor da borda de baixo*/
-webkit-transition-duration: .90s; /*duração do hover*/
}

Onde está destacado em negrito é as cores das bordas. Pode altera-las colocando a cor em HTML da cor desejada.

Sidebar

1. Aperte 'F3' e procure por esta palavra '/*BORDA DA SIDEBAR*/'

2. Cole o código abaixo logo acima de '/*BORDA DA SIDEBAR*/'

.sidebar .widget:hover {
border-top: 5px solid #000; /*cor da borda de cima*/
border-bottom: 5px solid #000; /*cor da borda de baixo*/
-webkit-transition-duration: .90s; /*duração do hover*/
}

Onde está destacado em negrito é as cores das bordas. Pode altera-las colocando a cor em HTML da cor desejada.

É somente isto. Espero que tenham gostado e aprendido!

Tutorial feito exclusivamente ao Sugoi Tutoriais. Caso reblogue, de os devidos créditos.