鼠标经过时候边框的实现

 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:

VisualizarCopiarImprimir

1. <ul> 
2.     <li><a href="#" title="Aspira Soldier"><img src="imagem.gif" alt="Aspira Soldier" /></a></li> 
3.     <li><a href="#" title="Elite Soldier"><img src="imagem.gif" alt="Elite Soldier" /></a></li> 
4.     <li><a href="#" title="Sniper Soldier"><img src="imagem.gif" alt="Sniper Soldier" /></a></li> 
5.     <li><a href="#" title="Gas Soldier"><img src="imagem.gif" alt="Gas Soldier" /></a></li> 
6. </ul> 

<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 manteremfixas. No “a:hover” definimos a espessura da borda e no “a:hover img”deslocamos negativamente as margens da imagem:

VisualizarCopiarImprimir

1. *{margin:0;padding:0;border:0;outline:0;list-style:none;text-decoration:none} 
2. ul li{float:left;margin-right:5px} 
3. ul li a,ul li a img{overflow:hidden;float:left} 
4. ul li a:hover{border:5px solid #999} 
5. ul li a:hover img{margin:-5px} 

*{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: