Efeito Light Cube

E ai meus bunnys curtindo muito as ferias? É eu pelo menos estou pulando muito por ai, mas trago um tutorial que achei no KW, o efeito se chama Light Cube. Eu achei ele estilo bem boate rsrs por causa daquelas luzes quadradas. (Dance) Mas bom querem tentar?

Brevia do efeito

1. Para adicionar este efeito, vá em seu HTML e procure por ]]></b:skin>, e acima cole:

Códigos

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

}

2. Abra um gadget de HTML/JavaScript, e dentro cole o seguinte:

Códigos

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

Prontinho!