Note:hover on the picture,you can see the effect.
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style type="text/css"> 5 img#pic:hover 6 { 7 -webkit-filter: grayscale(100%); 8 -moz-filter: grayscale(100%); 9 -ms-filter: grayscale(100%); 10 -o-filter: grayscale(100%); 11 12 filter: grayscale(100%); 13 14 filter: gray; 15 } 16 </style> 17 </head> 18 <body> 19 20 <img id="pic" src="klematis.jpg" width="150" height="113" alt="klematis"/> 21 <p><b>Note:</b>hover on the picture,you can see the effect.</p> 22 </body> 23 </html>