26nov/090
Borda interna em imagens
O efeito de borda interna nas imagens é muito utilizado pelo portal Globo.com. Neste post vou mostrar como é simples aplicar esse efeito em suas imagens usando poucas linhas de CSS.
HTML
Montamos uma lista inserindo um link para cada imagem:
<ul> <li><a href="#"><img src="imagem.gif" /></a></li> <li><a href="#"><img src="imagem.gif" /></a></li> <li><a href="#"><img src="imagem.gif" /></a></li> <li><a href="#"><img src="imagem.gif" /></a></li> </ul>
CSS
O uso do “overflow:hidden” é obrigatório para as imagens se manterem fixas. No “a:hover” definimos a espessura da borda e no “a:hover img” deslocamos negativamente as margens da imagem:
*{ margin: 0; padding: 0; border: 0; outline: 0; list-style: none; text-decoration: none; } ul li { float: left; margin-right: 5px; } ul li a,ul li a img { overflow: hidden; float: left; } ul li a:hover { border:5px solid #999; } ul li a:hover img { margin:-5px; }