Tutorial: Bordas em hover na imagem

Oii minhas garotinhas, tudo bem? Quanto tempo não é? Hoje eu vim ensinar um tutorial super prático que é como colocar bordas nas suas imagens, e quem sabe até em hover! É de um nível médio, tem que ter paciência e saber usar HTML. Vamos lá? 

Dessa vez, agora tenho outra novidade: fiz um blog de live preview's, para vocês conferirem a partir de hoje, como fica cada tutorial no seu blog ;]

LIVE PREVIEW

Primeiro você:

Vai no seu HTML > Dê um Ctrl+F ou F3 e procure por:

]]></b:skin>

Depois, acima dessa tag você cola:

..post img{

-webkit-transition-duration: .3600s;

border:3px solid  #CD9EDC; 

}

.post img:hover {

border:3px solid #DDA0DD;

moz-opacity:.80;

opacity:.80 ;

}

Super simples não é? Agora vamos transformar, o código normal:

border:3px solid #CD9EDC;

Em 1px você troca o "1" pelo número que quiser, e é a espessura da borda.

Em solid, você coloca o estilo da borda. Eu indico "solid" ou "ridge".

E por último, em #CD9EDC você coloca a cor que quiser.

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

É para arredondar sua imagem. Você pode adicionar ou não, e para arredondar mais, é só aumentar o número(só troque o 10 por um número maior) e diminuir(só troque o 10 por um número menor).

-webkit-transition-duration: .3600s;

É a duração do hover, se quiser lento. Se quiser rapidinho, pode apagar. O número 3600 é ótimo, mas pode trocar.

--------------------------------------------------------------------------------------

Agora o código em hover da sua imagem.

border:3px solid #DDA0DD;

Em 1px você troca o "1" pelo número que quiser, e é a espessura da borda no hover, ou seja quando passa o mouse.

Em solid, você coloca o estilo da borda no hover. 

E em #DDA0DD você coloca a cor que quiser pro seu hover.

moz-opacity:.80;

opacity:.80 ;

É se você quiser opacidade no hover. Se não quiser, pode tirar esse código. Mas se quiser, mantenha. O 80 é perfeito, mas se você quiser aumentar ou diminuir.

--------------------------------------------------------------------------------------

Muito difícil? Se você conseguir interpretar é fácil, eu ensinei e dei meu melhor. Mas a qualquer dúvida, estou a disposição certinho?

Vocês podem mudar qualquer coisa, adicionar, eu acho divino esse tutorial, as imagens ficam maravilhosas.

Tem mais uma surpresinha, mais uma novidade: o próximo lay, que é o da Aninha, eu não sei se ela ta fazendo, mas o meu, depois do dela, está prontíssimo e lindo, me superei. Acho que vocês vão amar <3

Beijos e mais beijos :3

Awwwwwwwwwwwn, inri x---x