鼠标经过时候边框的实现

 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:

Visualizar Copiar Imprimir

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

Visualizar Copiar Imprimir

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: