Já aprendemos aqui no blog como criar galerias de imagens tanto para o Flickr quanto para o Picasa. Hoje teremos uma técnica ligeiramente diferente e genérica. Ela não serve diretamente como galeria nem exatamente como um menu. Mas poderá ser usada para estilizar tanto um quanto o outro. Criaremos um conjunto de imagens sobrepostas, sendo que ao passarmos o mouse sobre uma ela irá deslizar mostrando seu conteúdo, tudo será feito sem o uso de java script.

Primeiramente iremos ressaltar a necessidade de conhecimentos prévios de HTML e CSS já que esse tutorial irá apenas explicar a técnica e não como implementa-la. Sem mais delongas vamos a estrutura básica:

Isto é muito simples, cria uma div com a classe menu que irá conter nossas imagens com seus respectivos links.
Você poderá copiar e colar esse HTML e ir alterando e testando aos poucos.
Opcionalmente no final desse texto encontra-se o código completo assim como a versão final do documento.

Apresentando As Imagens Em Forma De Baralho

Agora vamos começar a estilizar passo a passo para um melhor entendimento.
Crie uma folha de estilo com a seguinte diretriz:

.menu a {
	float: left;
	width: 45px;
}

Esse trecho irá fazer como que todos os links, e as imagens contidas nele se alinhem a esquerda uma da outra.
Além de, no caso desse exemplo, dar um tamnho de 45px para cada uma, este na verdade será o espaço entre elas.
Nesse momento a coisa já fica com a aparencia de um baralho, com cada imagem ficando em cima da anterior.

Colocando Movimento Nas Imagens

Beleza, agora vamos fazer com que as imagens se sobreponham.
Para tanto iremos inserir um estilo com a pseudo classe hover.
Como todos devem saber ela serve para alterar alguma coisa ao passarmos o mouse em cima, algo parecido com onMouseOver no javascript.
O CSS ficará assim então:

.menu {
	overflow: hidden;
	width: 590px;
}
.menu a {
	float: left;
	width: 45px;
}
.menu a:hover {
	width: 500px;
}

Ta vendo aquele pequeno pedaço de cada imagem que aparece no baralho de imagens?
Nós especificamos que ele tenha 45px, com essa adição estamos fazendo com que ao passarmos o mouse em cima ele passe a ter 500px.
Isto irá fazer com que ele empurre todo o resto para a direta, se colocar um overflow: hidden no nosso menu ele irá esconder tudo o que for superior ao seu tamanho.
Abaixo podemos ver como ficou a coisa:

Inserindo O Efeito Deslizante

Para tanto usaremos um efeito novo, especificado no CSS3 e que ainda não está totalmente implementado.
O atributo transition faz com que qualquer mudança ocorra de forma suave.
Assim sendo, ao usarmos, ao invés de o tamanho passar de 45px para 500px de uma vez ele irá ocorrer aos poucos.

.menu {
	overflow: hidden;
	width: 590px;
}
.menu a {
	float: left;
	width: 45px;
	transition: 1s;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
}
.menu a:hover {
	width: 500px;
}

Por hora são usa usados quatro implementações de transition porque cada navegador segue um modelo, isso se deve ao fato de esse estilo ainda não ser totalmente oficial.
Funciona bem no google chrome, no opera, no firefox, no safari e em outros.
Mas o IE 9 e anteriores ainda não reconhece, portanto nele não haverá efeito deslizante.

Versão Final E Comentários

Está pronto, uma forma contrutiva que pode ser usada em muitas ocasiões de acordo com sua criatividade.
É muito compátivel e em breve o IE também terá o efeito transition.
Se você entende pouco de HTML e CSS não se desespere, estude, pesquize e aprenda.
Se do contrário já tem bons conhecimentos tenho certeza que consiguirá adaptar esse código base a suas necessidades.
Segue o código completo e em pleno funcionamento:

 

 

Eu usei esse método como uma espécie de magazine, aqueles menus de destaques que geralmente ficam nas home page.
Se bem estilizados e adapatados ao template ficam bem bonitos, e o melhor, por ser feito em CSS puro, é extremamente leve se comparados aos concorrentes em javascript. É isso!