Hey guys, we will learn about how to convert images to grayscale effect use CSS3 filter effects, and this effect has supported to many web browser like Google Chrome, Mozila Firefox, Internet Explorer and other. So don't be afraid your blog has a different look on any web browser. Use CSS3 you can make other effect and animation and this is great programing web languages, use CSS3 we can make word shadows, and more effects. Whether we can convert the image to grayscale effect, sure. We can use CSS3 to make it, and this is simple CSS code and easy to understand.So, follow this steps below.Create Grayscale Hover Effect For Blogger1. Go to Blogger > Template > Edit HTML2. Back up your template3. And search </b:skin>Click the black arrow to see all the css code4. And paste this code just above </b:skin>.grayscale{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); 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"); /* Firefox 3.5+ */}.grayscale:hover{ filter: grayscale(0%); -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-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=\'0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */}5. And save your templateApplying CSS code to imageTo apply this grayscale effect to your image is easy, you just add<div class="grayscale"><img src="URL of your image" /></div>if the code is applied the result will be like this.grayscale{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 3.5+ */ } .grayscale:hover{ filter: grayscale(0%); -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 3.5+ */ }To make beautiful affect to your images you can add more code that you want.Read this too:Add Numbered Page Navigation For Blogger TemplateAdd Breadcrumbs Navigation Above Blogger Post TitleFix Duplicate Meta Descriptions Tag And Remove This Error
