Today we are going to learn how to transform images to grayscale / black and white, and on hover revert back to their original color, only with CSS. This is a very used effect by web designers across the globe as user can concentrate more on the viewed image, while the rest of the images are black and white, and don’t disturb his attention.
But how can I do it?
It’s pretty simple. Let’s assume you have a class named “gray_image” (you can name your class how you want) assigned to the images you want to convert to grayscale. Now all you have to do it’s write in your CSS file the following properties:
[css] .gray_image {filter: url(“data:image/svg+xml;utf8,#grayscale”); /* Firefox 10+, Firefox on Android */
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray; /* IE 6-9 */
}
.gray_image:hover {
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
filter: none;
}