Tutorial - Efeito Light Clube

Lan House :s

Boa tarde meus queridos leitores

Estou de viajem aqui e estou neste exacto momento em uma Lan House :3

Minha mãe teve boa vontade e me deixou vir.
Na verdade eu nem queria estar aqui, pois é o lugar para onde eu tipo, SEMPRE viajo. Mais fazer o que >.<

Bom hoje eu estava pensando no que postar e então vi no Kawaii World o efeito Light Club, que fica sempre lindo em imagens de Gadgets "Welcome". Mas no meu blog back to black segue? >.<

Eu estou usando o Menu Fade Image :3

Bom mais vamos lá, só tenho mais uma hora aqui na Lan House :3

Modelo > Editar HTML > F3 ou Ctrl F :
 ]]></b:skin>

Acima da 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;

}

Edite conforme pede :3
para ajudar você nas cores procure na tabela de cores.
Agora em um Gadgets > HTML/Java Script cole :

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

Edite e pronto >.<