Slide de Imagens e texto com Jquery - Parte 1

O demora !! foi mal galera .. to trabalhando muito mas muito mesmo...

A partir da idéia do post inicial podemos brincar com animações para garantir que o emento de número 2 realize iterações para melhor visualização do conteúdo na tela.

Passo 1 CSS

Vamos começar fazendo o css dos elementos, começando com o .boxgrid que irá conter a imagem, alinhada no canto superior esquerdo. não se esqueca do overflow:hidden que torna tudo isso possível. link

.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;  

}  

Se você não for utilizar legendas semi transparentes favor pular para o passo 2

.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)";  

    }

  Dependendo de como você vai querer o início da boxcaption (o que vai segurar o texto) tem que se definir os valores de top e left dependendo da altura ou largura do elemento boxgrid original.

Em breve a segunda parte do artigo. com o código Jquery e o html.

.captionfull .boxcaption {  

    top: 260;  

    left: 0;  

}  

.caption .boxcaption {  

    top: 220;  

    left: 0;  

}