Efeito - Cool Shadow

Hooy gente~

Pois é, hoje eu não tenho desculpa mesmo, não postei antes por preguiça #tapa

Ontem eu estava ocupada demais rindo das "luxes roxas" u-ú #morre

Então, eu também estou preparando um novo design, mas ele ainda vai demorar para ficar pronto, e eu com certeza não o colocarei tão cedo. Só avisando mesmo.

Bom, vim aqui mostrar um efeito muito diwo e lindo e perfeito que eu achei no Garota no Mundo HTML, mas peguei da cor da "sombra" no Kawaii World (porque o original é mais difícil de customizar e tudo mais)

Então, créditos ao - Kawaii World, Garota no Mundo HTML e ao Cantinho HTML, de onde é o código original.

Previem aqui!

Vamos lá?

1. Primeiro, vá no seu HTML e pesquise por "]]></b:skin>". Acima dessa TAG, cole o seguinte código:

.view {

   width: 110px;

   height: 110px;

   margin: 10px;

   float: left;

   border: 5px solid #fff;

   overflow: hidden;

   position: relative;

   text-align: center;

   box-shadow: 0px 0px 6px #777;

   cursor: default;

}

.view .mask, .view .content {

   width: 110px;

   height: 110px;

   position: absolute;

   overflow: hidden;

   top: 0;

   left: 0;

}

.view img {

   display: block;

   position: relative;

}

.oefeito img {

   opacity:0.2;

   transition-duration: 60s; -webkit-transition-duration: .60s;

}

.oefeito .mask {
   cursor:pointer;
   opacity:0.7;
   visibility:visible;
   border:85px solid #BEBEBE;
   box-sizing:border-box;
   -webkit-transition-duration: .60s;
}

.oefeito:hover .mask {

   border:0px double rgba(0,0,0,0.7);

   opacity:0;

   visibility:hidden;

}

.oefeito:hover img {

   opacity:1;

}

O código é grande, mas você só precisará personalizar o que está destacado. Caso você mexer em algo mais, ou não personalizar direito, o efeito não dará certo. (eu testei).

Onde está em negrito no código, será a altura e a largura da sua imagem. Onde está em Itálico, é a sombra da imagem; se não quiser, coloque "0px" ao invés de "6px". Onde está em Sublinhado, é a cor dessa "sombra" que fica na frente da sua imagem.

2. Adicione um novo Gadget (HTML/JavaScript) E cole o seguinte código:

<div class="view oefeito">
    <a href="LINK"><img src="URL DA SUA FOTO" /></a>
    <div class="mask"></div>
</div>
<div class="view oefeito">
    <a href="LINK"><img src="URL DA SUA FOTO" /></a>
    <div class="mask"></div>
</div>
<div class="view oefeito">
    <a href="LINK"><img src="URL DA SUA FOTO" /></a>
    <div class="mask"></div>
</div>

E, é isso, bem fácil não?! Gostaram? Qualquer dúvida basta comentar!