Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Mr Anderson

[Resolvido] Bordas Internas nas img tipo globo.com

Por , em Desenvolvimento frontend

Recommended Posts

Mr Anderson    0

Mr Anderson
Postado

Gostaria de colocar bordas internas em imagens, tipo como a globo.com faz.

 

Só que fiz várias divs, uma pra cada foto e configurei uma regra css pra quando elas estão estáticas, e outra para hover.

 

Porém não funfou e as imagens ficaram sambando na tela.

 

ae procurando, achei uma estrutura em lista pra fazer isso, só que não consigo fazer funcionar.

 

tô postando aqui, se alguém puder me ajudar, agradeço mt.

 

Abraços.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
img {border:none}
ul {margin:0; padding:0; width:236px}
ul:after {clear:both; content:"."; display:block; height:0; visibility:hidden;}
ul li {list-style-type:none; float:left; margin:0 3px 3px 0}
ul li a, ul li a img {float:left; overflow:hidden}
ul li a:hover {border:4px solid #f00}
ul li a:hover img {margin:-4px}
</style>
</head>

<body>
<ul>
	<li><img alt="" src="../foto01.JPG"/></li>
	<li><img alt="" src="../foto02.JPG"/></li>
    <li><img alt="" src="../foto3.JPG"/></li>
	<li><img alt="" src="../foto04.JPG"/></li>
</ul>
</body>
</html>

Fonte: http://www.cssnolanche.com.br/bordas-internas-em-imagens-com-css/

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito