Creating Effects Black & White In Pictures

Creating Effects Black & White In Pictures - The purpose of giving effect like this seems only to beautify the look of the blog, if for any other purpose I do not know. With this tutorial images in your posts will turn into black and white, like a return to a bygone era, where the photos are not colored. The effect is immediately visible on the picture and it will seem original color when the mouse cursor at the point on the image. For the Demo / Looks please click the link below.

LIVE DEMO

Creating Effects Black & White In Pictures

1. As Usual, login to your Blogger account (not belonging to someone else)
2. Click the Templates »Edit HTML
3. Then press Ctrl + F search for the code ]]> </ b: skin> or </ style>
4. Then add the following CSS script just above the code ]]> </ b: skin> or </ style>

 .post img { filter:url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); -webkit-filter:grayscale(1); filter:gray; padding:15px; box-shadow:0 0 15px #000; }
.post img:hover { filter:grayscale(0%); -webkit-filter:grayscale(0%); filter:url("data:image/svg+xml; utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0,0 1 0 0 0,0 0 1 0 0,0 0 0 1 0\'/></filter></svg>#grayscale"); }

5. Then save your template.