neyRicardo

Quem nunca perdeu alguns bons minutos tentando fazer aquele efeitinho nas imagens do Globo.com e do G1? Onde uma imagem qualquer num instante está sem borda e no outro, ao passar o mouse por cima, é emoldurada por uma borda que parece crescer de fora pra dentro.

Nunca viu? Dê uma olhada nos sites que eu citei acima.

Interessou? Continue lendo…

Quando vi pela primeira vez achei que era uma simples sobreposição de imagens. Mas como seria possível fazer isso em imagens com tamanhos variados?!

Depois fiz alguns testes com bordas e acabei chegando a uma conclusão: Bruxaria! Só assim seria possível fazer o efeito no site inteiro não importando o tamanho da imagem.

Então, depois de uma boa pesquisada e alguns testes, descobri que era mais fácil do que imaginava e escrevi esse código mínimo:

O segredo está nas linhas 8 a 11. É muito importante que os elementos ‘a‘ e ‘img‘ tenham as propriedades float e overflow conforme mostra o código acima, só assim é possível forçar uma margem negativa na imagem fazendo com que o link invada a área ocupada pela imagem.

Feito isso basta cuidar para que a espessura da borda tenha o mesmo valor me pixels que a margem negativa da imagem.

Eu sei, eu sei… O GIF é tosco mas ficou bom de entender, né? Fala sério…

Bom, trocando em miúdos: O link entra, a borda sai.