Sliding Boxes com jQuery

Através desta tradução e adaptação do original http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/, vou ensinar a fazer um efeito bem interessante com jQuery, confiram um exemplo, em uma página que eu fiz para um cliente: http://www.estudiotavares.com.br/casamentos.html.
Passe o mouse sobre as fotos e veja o efeito acontecendo, sobre a foto sobe uma faixa semi-transparente com uma pequena descrição, e um link, que neste caso leva para a galeria respectiva.

Abaixo uma imagem oficial do funcionamento:


1. Uma div externa, que abrigará todo o resto.

2. A div semi-transparente, que subirá e exibirá o texto.

3. A foto, como background.

Vamos aos códigos

Primeiro passo, o CSS:
Código que define a div externa (. Boxgrid) e define o padrão para imagens ficarem no canto superior esquerdo. Isso é importante para fazer a sobreposição enquanto desliza a div semi-transparente. Não se esqueça que o overflow: hidden torna tudo isso possível.

.boxgrid{
width: 325px;
height: 260px;
margin:10px;
float:left;
background:#161613;
border: solid 2px #8399AF;
overflow: hidden;
position: relative;
}
.boxgrid img{
position: absolute;
top: 0;
left: 0;
border: 0;
}
.boxcaption{
float: left;
position: absolute;
background: #000;
height: 100px;
width: 100%;
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

Agora vamos precisar de configurar o ponto de partida padrão da caixa de legenda, a div semi-transparente. Se você quiser, ela pode estar totalmente escondida no início, antes da rolagem, você terá de consultar o tamanho do box que você criou para coincidir com a altura ou a largura da janela (. Boxgrid), dependendo da direção que deslizará. Você também pode tê-lo parcialmente visível, inicialmente, como. Legenda. Boxcaption ilustra.

 .captionfull .boxcaption {
top: 260;
left: 0;
}
.caption .boxcaption {
top: 220;
left: 0;
}

Segundo passo, o JavaScript:

Esta próxima etapa é uma questão de escolher qual suites de animação você prefere, eu incluí um grupo de animações pré-formatados para ajudá-lo. Brinque com eles para encontrar um que satisfaça suas necessidades e estilo.

$(document).ready(function(){
//To switch directions up/down and left/right just place a "-" in front of the top/left attribute
//Vertical Sliding
$('.boxgrid.slidedown').hover(function(){
$(".cover", this).stop().animate({top:'-260px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
});
//Horizontal Sliding
$('.boxgrid.slideright').hover(function(){
$(".cover", this).stop().animate({left:'325px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
});
//Diagnal Sliding
$('.boxgrid.thecombo').hover(function(){
$(".cover", this).stop().animate({top:'260px', left:'325px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});
});
//Partial Sliding (Only show some of background)
$('.boxgrid.peek').hover(function(){
$(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160});
});
//Full Caption Sliding (Hidden to Visible)
$('.boxgrid.captionfull').hover(function(){
$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});
});
//Caption Sliding (Partially Hidden to Visible)
$('.boxgrid.caption').hover(function(){
$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});
});
});

Último passo, o HTML:

Existem umas poucas classes que criamos apenas como seletores de JQuery. Mantenha essas regras em mente:
• Classe A div ". Cover" deve ser atribuído ao que for fazer o movimento deslizante.
• Dentro da div. Boxgrid, a img deve sempre vir em primeiro lugar.
Aqui está um exemplo de HTML que eu usaria para a animação captionfull:

Jarek Kubicki
Artist
http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/" target="_BLANK">More Work

Basicamente é isso pessoal, se caso tentaram e não conseguiram, baixem a versão oficial para download, façam suas modificações e adaptem às suas necessidades, consultem também o site oficial, para mais detalhes ou possíveis atualizações.

Claro, não se esqueçam de baixar a biblioteca jQuery e adicionar em seu site!