» 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:
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 
Alguém postando a solução, igual ou diferente, estarei postando amanhã também
Aquele abraço.
Resposta no link http://www.brunodulcetti.com/blog/2007/06/26/resposta-do-desafio-como-cropar-uma-foto-com-css.html
Tags BlogBlogs: [ css, desafio, dicas, webstandards ]
1-colocar uma imagem por cima transparente com 3 px a menos e no hover acrescentar a borda.
2-colocar a imagem da garota como background de div e no hover diminuir o tamanho da div mantendo a mesma imagem de background, com position center.
fala juliano.
esqueci d mencionar que o conteúdo é dinâmico e é por imagem, não podendo colocá-la como BG =///
e valeu pelo comentário.
Como a imagem é um link, você pode deixar o link com display:block; e setar as dimensões, e adicionar um overflow:hidden; tambem ao link, assim você pode inserir a imagem em quais quer dimenções, o a:hover precisaria ter -3px nas dimenções e adicionar a borda.
É bem na base da gambiarra, mas funciona, foi assim que fiz em um projeto que participei.
abraços
Eu usaria a seguinte semantica:
(lembra do position:relative; ?) */
*/
[a href="link da imagem"][img src="url da imagem" alt="Acessibilidade, por favor" /][span>Acessibilidade, por favor[/span][/a]
E em meu css eu poderia usar o seguinte (não estou usando classes neste exemplo por quesrtões obvias):
a {
position:relative; /* com isto eu deixo a posição dos meus span com base em seus links */
width:186px;height:186px;
}
span {
position:absolute; /* Aqui eu defino que ele fica onde eu quiser
top:0;left:0;width:100%;height:100%; /* O tamanho total */
text-ident:-9000em;overflow:hidden; /* sumindo com o texto do span */
}
a:hover span {
top:3px;left:3px;
width:180px;height:180px; /* Menos 3px de cada lado */
border:3px solid #FF9C08; /* Os três pixel, de cada lado
}
Acredito que esta seja uma boa solução. Ainda não testei, mas vamos ver como pode ser solucionado. Bruno…
a.foto {
background-color: #FF9800;
}
a.foto:hover {
clip: rect(3px, 3px, 3px, 3px);
}
Sim, eu errei nos valores! Eles são contados do topo esquerdo e me esqueci disso!
No sentido horizontal, ficaria 3px na esquerda e 183px na direita.
Tô voltando p/ trampo!
Alisson, quase a solução que eu usei. Faltam alguns detalhes, por causa do IE, etc. Sempre ele.
Michael, pra varia, não funciona no ie e mesmo assim, tem alguns erros, algumas coisas que tive que mudar pra funcionar no FF, etc.
Sobral, o clip foi a primeira forma como fiz, é uma ótima opção, mas temos problemas com o IE pra variar, amanah explico direito.
Tá quase, tá quase… Valew ae pelas tentativas… Amanhã eu posto os resultados que obtive.
Coloque um background da cor que deseja a borda e faça um clip na imagem. Dá certo? Acho que sim, sei lá, não testei hehe.
[...] Como prometido, estou aqui pra postar a “resposta” do “desafio” que postei ontem aqui no Blog. [...]
Eu ia fazer o seguinte:
a img {padding:3px;}
a:hover img {
border:3px solid orange;
padding:0;
}
=D
Olá Matheus. Mas concorda que com o padding a imagem vai ganhar mais 6px de largura e altura, desfigurando o layout?
Fora que a borda não ficaria interna e sim por fora da imagem.
Mas valew pela resposta.
Aquele abraço.
Interessante, é o mesmo efeito utilizado no site da globo o G1.com.br Qual é o css definitivo. Qual reamente funciona este efeito?
O CSS abaixo funciona em ambos navegadores IE e Mozila:
.image { border: 2px solid #aaaaaa;}
a:link .image { border-color: #aaaaaa;}
a:visited .image { border-color: #aaaaaa;}
a:hover .image { border-color: #FF6600;}
Veja o resultado: http://geoimob.com.br/geoauto/maisdetalhes.php?id=7
Sim Dalton. Mas a diferença eh q no meu exemplo a imagem naum possui borda d início… E nesse exemplo q vc passou, ela jah começa com borda… Aih fica bem mais facil
Akele abraço.
Legal Bruno, mas e então… como faz?