Efeito Css3 - CoolShadow

Novo layout está quase pronto e adivinha quem é a Diva da vez, tchã tchã tchã tchãa

Olá galerinha, desculpa pela falta de posts da minha parte, é que eu fui viajar acabei caindo e machuquei a perna, ai não deu para mim fazer nenhum post, fiquei três dias sem sair de casa.
Então hoje eu trago para vocês um efeito bem legal, eu achei ele lá no CH, vocês podem visualizar o efeito aqui.
Olharam ? Gostaram ?
Então vamos ao tutorial :)



1) Copie o código abaixo no seu CSS:

 .view { width: 160px; height: 160px; margin: 10px; float: left; border: 5px solid #fff; overflow: hidden; position: relative; text-align: center; box-shadow: 0px 0px 5px #aaa; cursor: default; }
.view .mask, .view .content { width: 160px; height: 160px; 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:1; visibility:visible; border: 80px solid rgba(0,0,0,0.7); box-sizing:border-box; transition-duration: 60s; -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; }

→ Os “widths” e “heights” devem ser a largura e a altura da sua imagem, nas duas vezes em que aparecem.

→ As duas cores em RGBA você deve mudar para a cor que ficará antes do hover, no caso está em preto. Mas deve ser em rgba, se for em hex pode ficar sem a opacidade.

2) Agora copie o código abaixo onde quer que apareça:

<div class="view oefeito">
    <a href="#"><img src="LINKFOTO" /></a>
    <div class="mask"></div>
</div>
<div class="view oefeito">
    <a href="#"><img src="LINKFOTO" /></a>
    <div class="mask"></div>
</div>
<div class="view oefeito">
    <a href="#"><img src="LINKFOTO" /></a>
    <div class="mask"></div>
</div> 

Créditos: Aqui e Aqui!