Efeito light cube

Olá novamente :)

Notei que o blog tem muitos efeitos exclusivos de mim, mas tem poucos tutoriais conhecidos que se vê por aí, e convém em certos layouts. Claro que isso pode parecer mais um motivo para não os postar, mas eu gosto de organizar os tutoriais à minha maneira, e ter as minhas próprias personalizações. Então, hoje vou postar o efeito light cube, ligeiramente modificado por mim e já pronto para funcionar em todos os navegadores. Limitem-se a trocar as cores e dimensões da imagem, pode ser?

Prévia (www):

Tutorial:

No seu HTML, procure por:

/b:skin

Acima acrescente:

.light { /*enquadramento*/
   width: 250px;
   height: 161px;
   margin: 3px;
   float: center;
   border: 4px solid #f0e6e4;
   border-radius: 1px;
   overflow: hidden;
   position: relative;
   text-align: center;
   box-shadow: 1px 1px 3px #718dab;
   cursor: default;
}
.light .luv, .light .content {
   width: 250px;
   height: 161px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.light img {
   display: block;
   position: relative;
}
.cube img { /*imagem interna*/
   width: 250px;
   height: 161px;
   opacity: 1;
   -webkit-transition: all 0.3s ease-in;
   margin-top: 0;
   -webkit-transition-duration: .80s;
   -moz-transition-duration: .80s;
   -o-transition-duration: .80s;
   transition-duration: .80s;
}
.cube .luv { /*efeito de luz da imagem*/
   cursor: pointer;
   opacity: 0.7;
   visibility: visible;
   border: 85px solid #bfd2d9;
   box-sizing:border-box;
  -webkit-transition-duration: .80s;
  -moz-transition-duration: .80s;
  -o-transition-duration: .80s;
  transition-duration: .80s;
}
.cube:hover .luv {
   border: 1px double #fff;
   opacity: 0;
   visibility: hidden;
   -webkit-transition: all 0.5s cubic-bezier(0.940, 0.850, 0.100, 0.620);
   -webkit-transition-duration: .80s;
  -moz-transition-duration: .80s;
  -o-transition-duration: .80s;
  transition-duration: .80s;
   }
.cube:hover img {
   opacity: 1;
  -webkit-transition-duration: .80s;
  -moz-transition-duration: .80s;
  -o-transition-duration: .80s;
  transition-duration: .80s;
}

Agora adicione num gadget HTML/Javascript o código seguinte e faça as alterações necessárias:

<div class="light cube">
<a href="LINK"><img src="URL-DA-IMAGEM" /></a>
<div class="luv"></div></div>

Voilá, é só isto. Tentei colocar umas explicações simples ao longo do tutorial, só para se orientarem ligeiramente na hora de personalizar. Não se esqueçam de creditar.