How to Convert Images into Black and White Using CSS

<div dir="ltr" style="text-align: left;" trbidi="on">Today tutorial i will tell you how to change the color images into black and white using simple script. This code has the ability to make images into black and white using <a href="http://ichibikarin.blogspot.com/search/label/CSS" target="_blank">CSS</a>. Turn images into black and white without having to use Photoshop and other image editing softwar .<br />It is always nice to turn your colorful images into black and white in your web design work. Adding such a grey-scale effect on images is useful for gallery and hover effects designs.<br /><br /><b>Check out the demo below:</b><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjztDbNlhMvRnH6-kupbrsARAsrtjNhVukvebOP2JvTZjvysfQM1Z0PIU2WYcwgSfrkLQDLo0PdQdAZ-mhHm1YfpJPMJPz5Qc2qSTjqwrh-CAY2a-tnxmTwGCx2LYpNxHnA62twpd5NnR4/s1600/How+to+Convert+Images+into+Black+and+White+Using+CSS.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Convert Images into Black and White" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjztDbNlhMvRnH6-kupbrsARAsrtjNhVukvebOP2JvTZjvysfQM1Z0PIU2WYcwgSfrkLQDLo0PdQdAZ-mhHm1YfpJPMJPz5Qc2qSTjqwrh-CAY2a-tnxmTwGCx2LYpNxHnA62twpd5NnR4/s1600/How+to+Convert+Images+into+Black+and+White+Using+CSS.jpg" title="Convert Images into Black and White" /></a></div><br /><b><a href="http://demo-ichibikarin.blogspot.com/2013/03/how-to-convert-images-into-black-and.html" rel="nofollow" target="_blank">Click Here for More Live Demo:</a></b><br /><br /><h4 style="text-align: left;"><span style="font-weight: normal;">How can Add Css Code into your blog.</span></h4><br /><ol style="text-align: left;"><li>Go To Blogger > Design > Edit HTML</li><li>Search (Ctrl+F) for  ]]></b:skin></li></ol><br />Past below code above ]]></b:skin><br /><br /><blockquote class="tr_bq">#bk-grayscale{<br />background:url("1.jpg")no-repeat;<br />filter: grayscale(100%);<br />-webkit-filter: grayscale(100%);<br />-moz-filter: grayscale(100%);<br />-ms-filter: grayscale(100%);<br />-o-filter: grayscale(100%);<br />}</blockquote>And put the below code where you want to show images.<br /><br /><blockquote class="tr_bq"><img id="bk-grayscale" src="<span style="background-color: lime;">IMG URL</span>" /></blockquote> Change <span style="background-color: lime;">IMG URL</span> with your image URL<br /><br />And if you can add only one image on post or widgets then only put below html code<br /><br /><br /><blockquote class="tr_bq"><style><br />#bk-grayscale{<br />background:url("1.jpg")no-repeat;<br />filter: grayscale(100%);<br />-webkit-filter: grayscale(100%);<br />-moz-filter: grayscale(100%);<br />-ms-filter: grayscale(100%);<br />-o-filter: grayscale(100%);<br />}<br /></style><br /><img id="bk-grayscale" src="<span style="background-color: lime;">IMG URL</span>" /></blockquote>Change <span style="background-color: lime;">IMG URL</span> with your image URL<br /><br />Hope I was able to explain everything to the point. You can use other options along with grayscale filter on the images like hover effects and gallery stuffs without the need to use Photoshop or any other image editing software.</div>

How to Convert Images into Black and White Using CSS

Today tutorial i will tell you how to change the color images into black and white using simple script. This code has the ability to make im...

+ Read more »