CSS: Galeria de Fotos

Publicado em: 20 de fevereiro de 2009Categoria: CSS, Galeria de FotosTag(s): CSS, Galeria de Fotos

6.813ª

pessoa que visita este post.

Formatando uma galeria de fotos utilizando CSS.

Resultado final:

Arquivo CSS

div.imagem
{
  margin: 2px;
  border: 1px solid #000000;
  height: auto;
  width: auto;
  float: left; /* alinhamento a esquerda */
  text-align: center; /* texto da legenda alinhado no centro */
  font-family: Arial;
  font-size: 12px;
}
/* formatação das imagens */
div.imagem img
{
  display: inline; /* exibição das imagens alinhadas */
  margin: 3px;
  border: 1px solid #ffffff;
}
/* uma borda será exibida quando passar o mouse sobre a imagem */
div.imagem a:hover img {border: 1px solid #000000}
/* formataçao do texto que servirá como legenda para as imagens */
div.legenda
{
  text-align: center;
  font-weight: normal;
  width: 130px; /* define o tamanho da área em que será exibida a legenda -
			se o valor for menor que a quantidade de caracteres, 
			ocorre uma quebra de linha */
  margin: 2px;
}

Arquivo HTML

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>CSS - Galeria de Fotos</title>
   <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<!--
******************************************
*** Tamanho das imagens: 130 x 90px.
***
******************************************
-->
<div class="imagem">
   <a href="#" target="_blank">
      <img src="imagem/imagem1.jpg" alt="Imagem 1" width="130" height="90" /></a>
      <div class="legenda">Decrição: Imagem 1</div>
</div>
<div class="imagem">
   <a href="#" target="_blank">
      <img src="imagem/imagem2.jpg" alt="Imagem 2" width="130" height="90" /></a>
      <div class="legenda">Decrição: Imagem 2</div>
</div>
<div class="imagem">
   <a href="#" target="_blank">
      <img src="imagem/imagem3.jpg" alt="Imagem 3" width="130" height="90" /></a>
      <div class="legenda">Decrição: Imagem 3</div>
</div>
</body>
</html>