Imagens com bordas internas por css

Olá outra vez! Hoje venho trazer um tutorial muito querido por mim, vou mostrar como colocar bordas internas em imagens com CSS. Normalmente as bordas ficam em torno de uma imagem, porém com esse tutorial é possível deixa-la mas para dentro da imagem, podendo aplicar feito hover. Você pode ver o resultado no link que deixarei mais abaixo, espero que gostem! Os créditos vão para o blog Chá com Anjos, indico uma visita é um site maravilhoso!

Brevia do efeito

1. Escolha qual blog deseja aplicar o tutorial, em seguida vá ate seu HTML e procure por ]]></b:skin> Acima, cole:

Códigos

.interna {
outline-offset: -5px;
outline: 1px dashed #fff;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
.interna:hover {
outline-offset: -10px;
outline: 1px solid #d976a3;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;}

2. Agora vá ate seu Layout e escola um novo gadget javascript e dentro dele cole: 

Códigos

<a  href="LINK DO BLOG" title="NOME DO BLOG"><img src="URL DA IMAGEM" class="interna"></a>

◤Entendendo o código◥

• Espaçamento da borda. -5px é o número de pixels que a linha fica para dentro. No hover (quando passa o mouse), esse número aumenta para -10, o que faz a borda ficar mais "dentro" da imagem: outline-offset: -5px;

• Espaçamento da borda. -5px é o número de pixels que a linha fica para dentro. No hover (quando passa o mouse), esse número aumenta para -10, o que faz a borda ficar mais "dentro" da imagem: outline-offset: -5px;

• Tamanho da borda, estilo e cor. Em normal a borda é branca e tracejada, quando passa o mouse fica sólida e muda de branco para rosa: outline: 1px dashed #fff;

• Se refere a transição, ou seja, o tempo que demora para o efeito acontecer. Não mude:

-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;

É isso queridos! Esse modo de bordas pode ser usado em vários elementos além de imagens, até mesmo sidebar e área de postagem. Como havia mencionado o crédito do tutorial vai para o blog Chá com Anjos.