TidBits

Essa é uma galeria é Hoverbox Image Gallery, desenvolvida pelo Nathan Smith, e é uma idéia muito legal para se fazer uma galeria de fotos sem usar Flash ou Javascript.

É bem simples de fazer e funciona em todos os browsers. Veja o exemplo:

Para fazer igual, é só utilizar a mesma estrutura do html:

<div id="galeria">
<ul class="hoverbook>
<li><img src="#" alt="#" /><img src="#" alt="#" class="preview" /></a></li>
</ul>
</div>

A mesma imagem precisa ser invocada duas vezes (uma sem class definido, e outra com a class “preview” e para cada imagem da galeria, é só acrescentar um item li na lista.

Já o CSS, vai ficar assim:

#galeria{width:450px;}
.hoverbox{cursor:default; list-style:none;}
.hoverbox a{cursor:default; position:relative;}
.hoverbox a .preview{display:none;}
.hoverbox a:hover{font-size:100%; z-index:1;}
.hoverbox a:hover .preview{display:block; position:absolute; top:-33px; left:-45px; z-index:1;}
.hoverbox img{background:#fff; border-color:#aaa #ccc #ddd #bbb; border-style:solid; border-width:1px; color:inherit; padding:2px; vertical-align:top; width:80px; height:50px;}
.hoverbox li{background:#eee; border-color:#ddd #bbb #aaa #ccc; border-style:solid; border-width:1px; color:inherit; display:inline; float:left; margin:3px; padding:5px; position:static;}
.hoverbox .preview {border-color:#000; width:200px; height:150px;}

Em #galeria, é só definir a largura da galeria, enquanto o tamanho do thumb você configura em .hoverbox img . A largura da imagem quando aberta, fica na propriedade .hoverbox .preview mas a dica é se for aumentar o tamanho do preview, não se esqueça de aumentar o padding / margin entre os thumbs, do contrário a imagem ampliada vai obstruir o acesso à outras imagens da galeria.

Clique aqui para baixar o exemplo da Hoverbook Image Gallery.

Você pode se interessar também por:

• Lista de blogs em português sobre desenvolvimento web e TI
• Você não precisa de uma coleção de css hacks pra todos os browsers
• CSS Global Reset – Elimine as diferenças entre browsers
• Pseudo classes first-child e last-child cross browser usando css condicional
• CSS Sprites – Aumente o desempenho do seu site
• Quiz sobre CSS – Teste seu conhecimento
• As melhores ferramentas para validar seu código