Efeito swap

Atendendo um pedido nos comentários, hoje ensinarei a aplicar o efeito que uso nos gifs e em grande parte das imagens, aquele com uma bordinha interna branca que, ao passar o rato, desaparece. É um efeito mesmo muito fofo, e ensino com muito gosto, mas tenho de agradecer ao blog "Joven clube" (blog incrível, visitem» www), porque foi com ele que eu aprendi. Só retirei o blur, mas vou dar essa opção aqui para quem quiser, tal como a opção de bordas arredondadas, rotação ligeira e opacidade. Assim fica um efeito mais complexo >.<

Ah, mas embora eu tenha retirado o efeito de lá, como eu uso em imagens grandes, fiz uma ligiera alterção, então créditos para mim de qualquer maneira, tá?

Prévia:

Tutorial:

Procure por :

/b:skin

Acima da tag, cole:

.swap {
border-radius: 1px; /*é o arredondamento, remova a linha se não quiser*/
outline: solid 10px rgba(255, 255, 255, .5);
outline-offset: -10px;
-webkit-transition-duration: .60s;
}
.swap:hover {
outline: solid 0px rgba(255, 255, 255, .5);
outline-offset: 0px;
opacity: .80; /*é a transparência, remova a linha se não quiser*/
border-radius: 5px; /*é o arredondamento, remova a linha se não quiser*/
-webkit-filter: blur(1px); /*é o desfoque, remova a linha se não quiser*/
-webkit-transform: rotate(5deg);  /*é a inclinação, remova a linha se não quiser*/
-webkit-transition-duration: .60s;
}

Era isto, não se esqueçam de remover as linhas com coisas que não quiserem (eu, por exemplo, não uso blur nem rotação). Alterem os valores à vontade, mas não indico que o façam nas linhas que dizem outline...

Sempre que quiserem aplicar numa imagem, seja na postagem ou na side, escrevam:

<img src="URLDAIMAGEM" class="swap" />

Ja nee ^^