Efeito Mod

Boa tarde minna-san, passeando pelo R.O achei um efeito super simples, ele deixa as imagens em preto e branco com bordas internas. Ele se chama Mod achei muito lindo e acho que vou usar no meu próximo layout, não sei bem. Venho dizer que vou abrir uma nova Tag aqui no blog, de divulgação de blogs, assim que estiver pronto irei avisa-los. Mas vamos ao tutorial?

Brevia do efeito

1. Vá ate seu HTML, utilizando o atalho procure por  ]]>,  assim que o achar acima cole:

Códigos

.mod {-webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out;-webkit-filter:grayscale(100%);outline-offset: -5px;outline: 1px solid #caa29a; /*Cor da linhazinha*/}mod:hover {-webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out;-webkit-filter:grayscale(0%);outline-offset: -2px;outline: 1px solid #caa29a; /*Cor da linhazinha*/}

2. Salve e vá ate seu Layout adicionando um Gadget html/javascript e nele cole: 

Códigos

<a href="LINKDOBLOG" title="Nome aqui" ><img src="LINKDAIMAGEM" class="mod" /></a>

Arrume as parte indicadas e prontinho, se quiser adicionar mais é só repetir o código. Créditos pelo tutorial: R.O Kiss