Rascunhando o Papel: Efeito Crossed

Ola amorecos (: tudo joia?

Bom eu prometi que ia manter o blog atualizado prometo cumprir ~~mesmo ainda não feito nenhum dos deveres mas ok kkk~~ vamos la , trouxe um efeito super fofo que eu usaria no gadget de autoras mas vocês podem usar onde quiserem e onde a criatividade permitir então vamos ao tutorial!

~preview~

Na Hora de editar o HTML considere o fundo branco como 1º fundo e o fundo cinza como 2º fundo

Vá no seu HTML e procure por ]]></b:skin> e acima da tag cole:

.crossed{
 position: relative;
display: inline-block;
align: center;
width: 110px; /*largura*/
height: 110px; /*altura*/
text-align: center;
overflow: hidden;
border: 3px solid #cbafa5; /*cor da borda, senão quiser, tire isso*/
}
.crossed img {
z-index:1px;
background: #fff;
width: 110px;/*largura*/
height: 110px;/*altura*/
align: center;
}
.crossed .description{
position: absolute;
z-index:2px;
width: 110px;/*largura*/
height: 110px;/*altura*/
margin-top:0px;
margin-left:0px;
background: #fff; /*cor do 1º fundo, a parte branca da preview onde está escrito algo aqui*/
color: #000; /* cor do texto do fundo branco*/
text-shadow: 1px 1px 1px #303857;
opacity: 0.0;
-webkit-transition: all 1.0s ease-out;
-moz-transition: all 1.0s ease-out;
}
.crossed:hover .description  {
opacity: 0.75;
width: 110px;/*largura*/
height: 110px;/*altura*/
margin-top: -114px;
margin-left:0px;
}
.crossed .bla{
z-index:3px;
width: 110px;/*largura*/
height: 110px;/*altura*/
margin-top:-140px;
margin-left:0px;
background: #ABA4A1; /*cor do 2º fundo, a parte cinza da preview onde está escrito algo mais aqui*/
color: #000;/* cor do texto do fundo cinza*/
text-shadow: 1px 1px 1px #303857;
opacity: 1.0;
-webkit-transition: all 1.0s ease-out;
-moz-transition: all 1.0s ease-out;
}
.crossed:hover .bla  {
position:relative;
transform: ease-out;
opacity: 1.0;
width: 110px;/*largura*/
height: 110px;/*altura*/
margin-top: 38px;
}

Para utilizar essa adcionar um gadget html/javascript e colar:

Espero que gostem , qualquer duvida comentem!

Beijoos

Efeito Crossed

Nenhum comentário:

Postar um comentário