Galeria de imagem com CSS puro

Olá pessoal neste post estarei mostrando como fazer uma galeria de imagem  com CSS puro. Este exemplo foi baseado no exemplo do site http://www.dynamicdrive.com, neste site foi usado o pseudo-elemento :hover, porém eu usei o :active, fazendo com que a imagem só amplie de tamanho quando clicada, fiz também outras modificações para adaptar melhor ao IE6 e ao Opera. Falando em IE6(esta porcaria), o efeito do :active tem uma pequena diferença dos outros navegadores, no IE6 quando a imagem for clicada ela irá ampliar normal, mas quando o botão do mouse deixar de ser pressionado a imagem permanece ampliada e nos outros navegadores(Firefox, Opera, Safari, Chrome, IE7…) a imagem some para o usúario escolher outra, não consegui descobrir um jeito para consertar isso, se alguem descobrir é só falar ai nos comentários que eu adicionarei com os devidor créditos!

Bom vamos ao que interessa…

A estrutura do arquivo (X)HTML ficaria assim:

[...]
<div id="galeria">
<small>Clique na miniatura para aumentar a imagem</small><br /><br />
 <a class="thumb" href="#thumb">
 <img src="imagens/thumb_image1.jpg" alt="" />
 <span>
 <img src="imagens/1.jpg" alt="" />
 </span>
 </a>
</div>
[...]

Onde dentro do <a> vai ficar as duas imagens, o thumbnail(miniatura) e imagem com tamanho maior(recomendo 400×300, ou aproximado),o thumbnail será a imagem clicada que recebe um link “cego” a imagem maior fica dentro de um <span> onde será feito a “mágica” com css, para aparecer quando for chamada, segue a “mágica”

Arquivo CSS:

*{padding:0;margin:0;}/*deixar margem e padding dos elementos com padrão zerado*/
small{font-size:12px; font-weight:bold;color:#333;}/*formata a mensagem de como visualizar as imagens*/
#galeria{background-color:#9FCBFF;position:relative;width:720px;margin:25px auto;padding:10px;text-align:center;}/*div pai, que englobará as imagens*/
a.thumb img{background-color:#fff;border: 1px solid #999;padding:3px;}/*estiliza as miniaturas*/
a.thumb span{position:absolute;background-color: #000;padding: 10px;left:-10000px;visibility: hidden;color: black;text-decoration: none;}/*começa a mágica*/
a.thumb:active span{visibility:visible;top: 50px;left: 120px;z-index: 50;}/*termina a mágica!*/

As declarações CSS principais para o efeito são:

a.thumb span:

• left:-10000px; – Joga as iamgens que estão sentro do <span> para -10000px do monitor, sendo assim esconde do campo de visão
• visibility: hidden; – Simplesmente desaparece com a imagem

a.thumb:active span:

• visibility: visible; - Faz a imagem aparecer quando a miniatura for clicada, ativando o pseudo-elemento :active
• z-index: 50; – poe a imagem maior sobre as miniaturas
• top: 50px; e left:120px; – posiciona a imagem maior na tela

Baixem um exemplo completo aqui