Leonardo Caineli Web Designer e Programador de Interfaces

Borda interna nas imagens com CSS

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.

XHTML:

Montamos uma lista inserindo um link para cada imagem:

<ul>
	<li><a href="#" title="Aspira Soldier"><img src="imagem.gif" alt="Aspira Soldier" /></a></li>
	<li><a href="#" title="Elite Soldier"><img src="imagem.gif" alt="Elite Soldier" /></a></li>
	<li><a href="#" title="Sniper Soldier"><img src="imagem.gif" alt="Sniper Soldier" /></a></li>
	<li><a href="#" title="Gas Soldier"><img src="imagem.gif" alt="Gas Soldier" /></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}

Resultado: