Desafio: Como "cropar" uma foto com CSS

E ae, pessoal. Hoje estou aqui com algo diferente. Estava semana passada aqui na Globo.com, implementando um novo projeto, o qual falarei em breve para vocês, quando acabei parando em um probleminha chato.

Um novo efeito de over nos links que o pessoal de design fez no layout. É interessante, gostei, mas fiquei pensando um tempinho em como implementá-lo.

Legal, Bruno, mas qual é o desafio?

Então. Vou apresentar o efeito. É como se fosse uma borda de 3px em volta de uma foto, mas só que interna, como se "cropasse" a foto. Veja abaixo:

Exemplo do Efeito

A largura é de 186px e continua com 186px com o hover do mouse, mas com uma borda de 3px. Se fosse só colocar a borda, seria fácil, porque era só diminuir o tamanho da foto no hover, mas como isso não poderia acontecer, tive que pensar em outra solução.

Colocando somente a borda, a largura ficaria 192px, o que faria quebrar o grid, portanto, não adianta usar somente a borda.

[UPDATE] O juliano postou uma forma de fazer, mas como background. Esse update é só pra realçar que tem q ser por imagem, pois o conteúdo é dinâmico e a imagem faz parte do conteúdo ;)

Valew ae juliano. [/UPDATE]

Finalizando

Está lançado. Amanhã estarei publicando as duas soluções que achei. Lembrando que tem que ter suporte na maioria dos browsers, senão em todos :D

Alguém postando a solução, igual ou diferente, estarei postando amanhã também ;)

Aquele abraço.

Resposta no link /resposta-do-desafio-como-cropar-uma-foto-com-css

Próximo post:Resposta do Desafio: Como "cropar" uma foto com CSSPost anterior:Como você escreve seus arquivos CSS? Parte 3

Comentários