by Felipe Lambert
23. August 2010 10:28
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;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
-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;
}
Subscribe