Efeito das imagens do blog.

Konnichi wa! ❤

Criei uma página no Facebook. Sei que já existem várias deste tipo e que, agora, nem é nada tão original assim, mas poderiam curtir para mim? É só clicar aqui, ok? Ela é realmente nova, comecei com ela ontem e acho que vou abrir algumas vagas para moderação. Caso queiram...

Enfim, depois de reorganizar-me, finalmente vim postar um dos pedidos mais feitos desde o último template: Como fazer esse efeito das minhas ilustrações. Sei que as pessoas querem mais a borda do que o efeito em si, mas irei postar do mesmo modo.

O efeito é bem simples e bonitinho. Ele tem uma opacidade que sai quando o mouse passa em cima da imagem - hover. Também tem a borda pontilhada interna que deixa o efeito bem fofo. Já vi esse efeito de opacidade, mas nunca cheguei a ver o tutorial. 

Peguei alguns código desse efeito nesses blogs: xxx xxx

Para usar o efeito, vá em Modelo > Editar HTML > Expanda a 1ª setinha. Dê Ctrl + F ou F3 e procure por ]]. Acima dessa tag, cole:

.post img{
opacity: 0.6;
outline: 1px dotted #fff;
outline-offset: -5px;
}
.post img:hover {
opacity: 1.7;
outline: 1px dotted #fff;
outline-offset: -5px;
}

Visualize e ,caso o efeito tenha dado certo, salve.

/ana