Princípios básicos
Estas caixas deslizantes dinâmicas baseiam-se no mesmo princípio básico. A tag DIV com ".boxgrid" atua como uma janela depois que você passa os outros dois itens do objeto que deseja "espiar". Não tem certeza? Deixe esta imagem lhe dar uma pista:
Depois de compreender este princípio básico, podemos usar o efeito de animação de elementos deslizantes para descobrir ou cobrir a área a ser exibida para criar um efeito deslizante.
Clique para visualizar o efeito Baixe os arquivos de origem deste exemplo
Etapa um – Noções básicas de CSS
No diagrama de inspiração acima que dá a estrutura básica, precisamos usar um pouco de CSS para fazer com que ele exiba o efeito desejado. O CSS a seguir define a janela de visualização (.boxgrid) e define a POSIÇÃO padrão da imagem em LEFT e TOP, o que é muito importante para explicações sobrepostas ao deslizar. E não esqueça que overflow:hidden tornará isso possível.
.boxgrid{
largura: 325px;
altura: 260px;
margem:10px;
flutuar:esquerda;
plano de fundo:#161613;
borda: 2px sólido #8399AF;
estouro: oculto;
posição: relativa;
}
.boxgrid img{
posição: absoluta;
superior: 0;
esquerda: 0;
borda: 0;
}
Se você não estiver pronto para usar CSS para obter uma descrição translúcida, poderá pular diretamente para a segunda etapa:
.boxcaption{
flutuar: esquerda;
posição: absoluta;
plano de fundo: #000;
altura: 100px;
largura: 100%;
opacidade: 0,8;
/* Para IE 5-7 */
filtro: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* Para IE 8 */
-Filtro MS: "progid:DXImageTransform.Microsoft.Alpha(Opacidade=80)";
}
Agora, precisamos definir o ponto de partida padrão para a caixa de legenda (acho que camadas são melhores que caixas). Se quiser que ela fique completamente oculta quando inicializada, você precisará definir TOP e LEFT para a altura e largura da sua janela (.boxgrid), que (é claro) é determinada pela direção que você deseja deslizar. Você também pode fazer com que ele mostre apenas parte dele na inicialização, conforme fornecido por estes .caption e .boxcaption (definidos por CSS):
.captionfull .boxcaption {
superior: 260;
esquerda: 0;
}
.caption .boxcaption {
superior: 220;
esquerda: 0;
}
Fonte: Favoritos Felizes