Efeito Cool Shadow

• Visualizar

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>