Greyscale image with filter in CSS3

#webdev #css #tutorial #productivity

What is a greyscale image with filter in css3? How do you make a greyscale image with filter in css3?

Greyscale image with filter in CSS3 - HTML Code:

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Greyscale image with filter in CSS3</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="image"> <img src="http://dummyimage.com/600x400/F00000/ffffff.png" alt="" title="" />
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Greyscale image with filter in CSS3 - CSS Code:

img { -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); filter: gray; /* IE 6-9 */ -webkit-transition: all .6s ease;
}
img:hover { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; /* IE 6-9 */
}