Yoo minna-san.
Hoje eu trouxe um efeito para vocês.
Achei o efeito no Kawaii World, então créditos!
O efeito é muito legal! Para visualizar, clique aqui.
Interessado? Leia mais.
1. Vá para a sua HTML e procure por ]]></b:skin>. Acima, 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;
}
Mude oque esta em negrito. Não se esqueça que tem que repetir a largura e a altura.
2. AGora, vá em Layout e adicione um gadget HTML/JavaScript e cole:
div class="sd efeito"> <a href="SEU LINK"><img src="LINK DA IMAGEM" /></a> <div class="luv"></div>
Adorei ><
ResponderExcluir