Efeito Light Cub

Bom dia queridos leitores do meu querido blog, como esta o dia? espero que bem, bem hoje eu estava meio sem ideias para a postagem, ando meio sem criatividade, espero que seja temporário rsrs, mas acabei trazendo um efeito bem legal para vocês usarem em sua elite de afiliados ou aonde você quiser, o tutorial é rápido e simples... e vamos que vamos... beijos e até amanha!!

Live Preview

01- Passo - Cole o código abaixo acima da tag: ]]></b:skin>

.sd {
   width: 290px;
   height: 200px;
   margin: 10px;
   float: left;
   border: 5px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   box-shadow: 1px 1px 4px #ccc;
   cursor: default;
}
.sd .luv, .sd .content {
   width: 290px;
   height: 200px;
   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: .50s;
}
.efeito .luv {
   cursor:pointer;
   opacity:0.5;
   visibility:visible;
   border:100px solid #e69ba7;
   box-sizing:border-box;
   -webkit-transition-duration: .50s;
}
.efeito:hover .luv {
   border:0px double #fff;
   opacity:0;
   visibility:hidden;
   -webkit-transition: all 0.4s cubic-bezier(0.940, 0.850, 0.100, 0.620);
   -webkit-transition-duration: .50s;
   }
.efeito:hover img {
   opacity:1;
  -webkit-transition-duration: .70s;
}

02- Passo - Coloque o código abaixo em um HTML/JAVASCRIPT onde você quer que apareça.

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


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

    Feito isso salve e desfrute do lindo resultado, beijos meus zombies e espero que tenham gostado!!