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; }