Como aplicar efeito nas imagens do blog

Olá! Hoje vou mostrar como colocar efeitos nas imagens do blog que você quiser. Nesse post irei mostrar três efeitos, sendo eles as bordas coloridas, preto e branco e sépia.

Bordas coloridas

Cole acima de ]]></b:skin> :

.bordinhas {
border: 3px solid #COR;
border-radius: 5px;
-webkit-transition-duration: .40s;
}
.bordinhas:hover {
border: 3px solid #COR-AO-PASSAR-O-MOUSE;
}

Cole onde queira usar:

<img src="URL-DA-IMAGEM" class="bordinhas">

Preto e branco

Cole acima de ]]></b:skin>:

.pretoebranco {
-webkit-filter: grayscale(1.0);
-webkit-transition-duration: .40s;
}
.pretoebranco:hover {
-webkit-filter: grayscale(0);
}

Cole onde queira usar:

<img src="URL-DA-IMAGEM" class="pretoebranco">

Sépia

Cole acima de ]]></b:skin>:

.sepia {
-webkit-filter: sepia(1.0);
-webkit-transition-duration: .40s;
}
.sepia:hover {
-webkit-filter: sepia(0);
}

Cole onde queira usar:

<img src="URL-DA-IMAGEM" class="sepia">

Espero que tenham gostado, beijos :*