Efeito Light Cube

Boa noite meus anjos tudo bom?

Hoje trouxe um efeito bem legal, ele é meio antiguinho mais é bem interessante

Click aqui para verem o efeito Light Cube

1° Vá em seu HTML e procure por : ]]></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;}

Faça as personalizações ! e Salve !

2° Em um gadget HTML/JavaScript cole :


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

Faça as alterações

Espero que tenham gostado !




Créditos: Kawaii World