Tutorial - Efeito Light Cube

imagem do kawaii world

Olá docinhos, eu vim  postar pra vcs um tutorial muiiiito legal que aprendi no blog Kawaii World , então os créditos vão todos a esse blog lindo que eu amo de coração, amo demais esse efeito que é o Light Cube. Se quiserem ver cliquem <aqui> Vamos aprender?

Vá até editar HTML e procure por ]]></b:skin>. Após encontrar, acima dessa tag, cole:

.sd {

   width: LARGURApx;

   height: ALTURApx;

   margin: 10px;

   float: center;

   border: 5px solid #fff;

   overflow: hidden;

   position: relative;

   text-align: center;

   box-shadow: 1px 1px 4px #ccc;

   cursor: default;

}

.sd .luv, .sd .content {

   width: LARGURApx;

   height: ALTURApx;

   position: absolute;

   overflow: hidden;

   top: 0;

   left: 0;

}

.sd img {

   display: block;

   position: relative;

}

.efeito img {

   opacity:1;

   -webkit-transition: all 0.3s ease-in;

   margin-top: 0;

   -webkit-transition-duration: .60s;

}

.efeito .luv {

   cursor:pointer;

   opacity:0.7;

   visibility:visible;

   border:85px solid #CORDOEFEITO;

   box-sizing:border-box;

   -webkit-transition-duration: .60s;

}

.efeito:hover .luv {

   border:0px double #fff;

   opacity:0;

   visibility:hidden;

   -webkit-transition: all 0.5s cubic-bezier(0.940, 0.850, 0.100, 0.620);

   -webkit-transition-duration: .60s;

   }

.efeito:hover img {

   opacity:1;

  -webkit-transition-duration: .80s;

}

Só mudem o tamanho e a cor do efeito ta?

Adicione um gadget de HTML/JavaScript, cole o seguinte:

<div class="sd efeito">      <a href="SEU LINK"><img src="LINK DA IMAGEM" /></a>       <div class="luv"></div>  
Kiss