Save yourself some time by using Black & White CSS filters. By using the following code, you don’t have to convert the image into black and white with Photoshop.
You can also use this on hovers.
/*--Black & White filter with hover on featured images--*/
.featured-content img {-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%);}
.featured-content img:hover {-webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */ filter: grayscale(0%);}
/*--Black & White filter on content images--*/
.entry-content img {-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%);}
.featured-content img:hover {-webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */ filter: grayscale(0%);}
/*--Black & White filter on specific images. Add bw-filter class to image--*/
.entry-content img.bw-filter {-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%);}
.entry-content img.bw-filter:hover {-webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */ filter: grayscale(0%);}