HTML CSS examples for CSS Widget:Hover to change Color
make smooth grayscale on hover using CSS
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #monalisa {<!--from ww w .j ava 2 s .c om--> width:401px; height:601px; position:absolute; top:0; left:0; cursor:pointer; background:url('https://www.java2s.com/style/demo/Google-Chrome.png'); background-size:cover; filter:grayscale(100%); opacity:2; transition:opacity .6s linear } #monalisa:hover { opacity:0; } #container { width:401px; height:601px; position:absolute; top:0; left:0; background:url('https://www.java2s.com/style/demo/Google-Chrome.png'); background-size:cover; } </style> </head> <body> <div id="container"> <div id="monalisa"></div> </div> </body> </html>