Galeria de imagens usando apenas CSS

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.

8 thoughts on “Galeria de imagens usando apenas CSS

  1. Como faço para colocar essa galeria em um post do blogger? ela é ótima, é o que eu estou procurando a um tempão…
    Se puder me ajudar, te agraço!
    Abraço!

  2. Existe algumas correções a fazer no código postado.

    Em:

    O certo é “hoverbox”>

    E em:

    O correto é:

    Funcionou muito bem, ótima galeria.

  3. Olá amigo como faço para criar uma galeria dessa no blogger? de ja sou muito grato e parabens.

  4. Boa, mas deu um erro comigo, pois preciso colocar a galeria dentro de uma página php e fazer um include, nesse momento o css perde a validade e não funciona, como posso resolver esse problema?

    grato!

Leave a Reply

Your email address will not be published. Required fields are marked *