Efeito: Filter Colors

Hoje trago pra vocês um efeito de fotos para o blog de vocês, achei ele lindo, espero que gostem! Vamos lá? O efeito é esse aqui.

Primeiro procure no código do seu blog apertando F3 o código <b:skin> e abaixo dele cole o código:

/* Fakescomm - Por Malu Aguiar */

.wrap {

overflow: hidden;

width: 550px;

margin: 0 auto;

position: relative;



}

.tint {

position: relative;

float: left;

margin-right: 5px; /* Distância entre elas - direita */

margin-bottom: 5px; /* Distância entre elas - em cima */

cursor: pointer;





}



.tint:before {

content: "";

display: block;

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

background-color: rgba(254, 143, 209, 0.5);

background: rgba(254, 143, 209, 0.5);

color: rgba(254, 143, 209, 0.5);

-moz-transition: all .3s linear;

-webkit-transition: all .3s linear;

-ms-transition: all .3s linear;

-o-transition: all .3s linear;

transition: all .3s linear;

border: 7px solid rgba(254, 143, 209, 1);;

}



.tint:hover:before {

background: none;



}



.t2:before {

background-color: rgba(190, 198, 228, 0.5);

background: rgba(190, 198, 228, 0.6);

color: rgba(190, 198, 228, 0.6);

border: 7px solid rgba(190, 192, 201, 1);

}



.t3:before {

background-color: rgba(190, 218, 113, 0.5);

background: rgba(190, 218, 113, 0.5);

color: rgba(190, 218, 113, 0.5);

border: 7px solid rgba(190, 218, 113, 1);

}



.t4:before {

background-color: rgba(173, 91, 32, 0.5);

background: rgba(173, 91, 32, 0.5);

color: rgba(173, 91, 32, 0.5);

border: 7px solid rgba(173, 91, 32, 1);

}



.t5:before {

background-color: rgba(227, 46, 255, 0.5);

background: rgba(227, 46, 255, 0.4);

color: rgba(227, 46, 255, 0.4);

border: 7px solid rgba(227, 46, 255, 1);

}



.t6:before {

background-color: rgba(114, 102, 73, 0.5);

background: rgba(114, 102, 73, 0.4);

color: rgba(114, 102, 73, 0.4);

border: 7px solid rgba(114, 102, 73, 1);

}



/* Fim Bjs e obrigada por usar */

Agora coloque onde quiser usando o código abaixo:

<figure class="tint">

<img alt="" src="URL DA PRIMEIRA IMAGEM" height="160" width="160" />

</figure>



<figure class="tint t2">

<img alt="" src="URL DA SEGUNDA IMAGEM" height="160" width="160" />

</figure>



<figure class="tint t3">

<img alt="" src="URL DA TERCEIRA IMAGEM" height="160" width="160" />

</figure>



<figure class="tint t4">

<img alt="" src="URL DA QUARTA IMAGEM" height="160" width="160" />

</figure>



<figure class="tint t5">

<img alt="" src="URL DA QUINTA IMAGEM" height="160" width="160" />

</figure>



<figure class="tint t6">

<img alt="" src="URL DA SEXTA IMAGEM" height="160" width="160" />

</figure></div>