Como prometido, estou aqui pra postar a \"resposta\" do \"desafio\" que postei ontem aqui no Blog.
\nAlgumas sugestões, soluções, bem próximas da que eu arrumei e achei melhor. Vou tentar explicar detalhadamente porque não utilizei tal solução, porque fiz dessa forma, o que não rola, suporte, etc.
\nO juliano postou uma solução com background, mas como eu disse depois, não é possível, pois o conteúdo é dinâmico, portanto, não rola colocar como background.
\nA do Michael ficou um pouco extensa, com um span como se fosse uma \"máscara\", mostrando somente a área necessária. Mas como sabemos, o IE não nos ajuda quase nunca :P e não funciona a pseudo-classe :hover, somente em link, mas somente alguns atributos são suportados.
\nSobral e Mico citaram o clip, mas como citei acima, o IE não suporta a pseudo-classe e somente alguns atributos são suportados, o que não é o caso do clip, infelizmente. Fora que o clip só funciona em elementos com position absolute ou fixed.
\nA do Alisson ficou +ou- parecido com a que eu implementei, mas faltaram alguns detalhes, algumas mudanças, para que funcionasse perfeitamente.
\nChega de conversa e vamos para a primeira solução. Nessa eu utilizei o clip, como o mico e o sobral citaram, mas como falei, preciso da pseudo-classe :hover funcionando perfeitamente no IE, com isso, tive que utilizar um arquivo .htc, que faz com que o IE aceite o hover em qualquer tag.
\n<div id=\"fotos\">\n <a href=\"#\" title=\"\" class=\"cropFoto\"><img src=\"thumb.jpg\" alt=\"Foto\" /></a>\n</div>* {\n margin: 0;\n padding: 0;\n}\nbody {\n padding: 20px;\n}\nul {\n list-style: none;\n}\nimg {\n border: 0;\n}\n#fotos {\n width: 186px;\n}\n#fotos * {\n display: block;\n}\n#fotos .cropFoto {\n background-color: #e70202;\n height: 116px;\n position: relative;\n}\n#fotos .cropFoto img {\n position: absolute;\n}\n#fotos .cropFoto:hover img {\n clip: rect(3px 183px 113px 3px);\n}Um código simples e curto. Não vou ficar detalhando coisas desnecessárias, somente o que eu acho relevante para o entendimento para um desenvolvedor intermediário, etc.
\nO link recebe a classe cropFoto, com a cor de background que eu quero que fique a \"borda\" em volta da imagem. Recebe o valor de altura igual a altura da imagem e recebe um position relative.
\nA imagem dentro do link recebe um position absolute, lembram que o clip só funciona em elementos com position absolute e fixed? Por isso que também tive que colocar o position relative dentro do link, para a imagem não se basear de acordo com o body, etc.
\nVeja o exemplo funcionando.
\nPara mais infos sobre position, visite o artigo que escrevi no imasters sobre o assunto.
\nExatamente. Graças a ele, precisamos utilizar a gambiarra que falei anteriormente, pra funcionar a pseudo-classe :hover. Percebam que só funciona em link, e estou utilizando em um link, mas mesmo assim não funcionou o clip. Ele só aceita alguns atributos no :hover
\nÉ só anexarmos o csshover.htc no html, que funciona no IE. Baixe o arquivo .htc aqui e cole o código abaixo entre as tags <head> e </head>:
<!--[if IE]>\n <style type=\"text/css\">\n body {\n behavior: url(csshover.htc);\n }\n </style>\n<![endif]-->Veja o exemplo correto funcionando
\nExatamente, mas sempre existe um porém. Temos vantagens em utilizar esse htc, pois teremos hover em todas as tags, mas, como nem tudo é perfeito, temos alguns problemas:
\nPor essas e outras, tive que buscar uma outra opção, modo, de implementar esse efeito, somente por CSS, sem colocar htc, js, nem nada.
\nEis que surge uma idéia no início, meio bizarra pra utilizar como solução. E não é que deu certo? :D O código HTML utilizado foi o mesmo do exemplo anterior. Abaixo segue o CSS:
\n* {\n margin: 0;\n padding: 0;\n}\nbody {\n padding: 20px;\n}\nul {\n list-style: none;\n}\nimg {\n border: 0;\n}\n\n#fotos {\n width: 186px;\n}\n#fotos \\* {\n display: block;\n}\n#fotos .cropFoto {\n overflow: hidden;\n height: 116px;\n width: 186px;\n}\n#fotos .cropFoto:hover {\n border: 3px solid #e70202;\n height: 110px;\n width: 180px;\n}Veja este exemplo funcionando.
\nEntão, +ou-. Ainda não está 100%, porque dá um efeito que a imagem se move por causa da borda colocada no link.
\nÉ um código bem simples, de fácil entendimento. A imagem o link estão como block, o link está com a largura e altura setada de acordo com o tamanho da imagem. Esse tamanho pode variar, dependendo da imagem, é só modificar no CSS pro tamanho da imagem.
\nNo hover do link, ele diminui 6px de altura e largura e ganha 3px de borda em volta dele, totalizando a mesma largura e altura.
\nO overflow hidden do link serve pra que mesmo que a imagem seja maior que o link, o que é o caso no estado :hover, ela fique oculta, não quebrando o layout, etc.
\nSimples, apenas uma linha de CSS, colocando uma margem pra imagem, no hover do link:
\n#fotos .cropFoto:hover img {\n margin: -3px 0 0 -3px;\n}Veja o exemplo final funcionando.
\nAgora sim hein :D Graças a Deus, o IE aceita o atributo margin na pseudo-classe hover do link no CSS. ;)
\nBom, é uma solução simples, tranquila, mas que nem sempre vem a cabeça facilmente, rápido. Testei no IE 6, IE 7, Firefox, Opera, Firefox Mac, Safari e todos funcionaram perfeitamente, sem nenhuma diferença.
\nAlgumas coisas precisam de alguns detalhes pra funcionar, por exemplo, o display: block no link, na imagem também pra ficar correto, se fosse usar o clip, lembrar do position: absolute, lembrar do overflow: hidden, etc, etc, etc.
\nSempre tem essas pequenas coisas que são essenciais saber no CSS, que você pega com a prática.
\nBom, é isso. Qualquer dúvida, correção ou solução melhor, é só comentar que eu posto aqui ;)
\nAquele abraço.
"}},"pageContext":{"nextPost":{"fields":{"slug":"/quando-foi-a-primeira-vez-que-ouviu-falar-de-web-standards/"},"frontmatter":{"title":"Quando foi a primeira vez que ouviu falar de web standards?"}},"previousPost":{"fields":{"slug":"/desafio-como-cropar-uma-foto-com-css/"},"frontmatter":{"title":"Desafio: Como \"cropar\" uma foto com CSS"}},"slug":"/resposta-do-desafio-como-cropar-uma-foto-com-css/"}},"staticQueryHashes":["1271460761","2963127411","3623170217","764694655"]}