Class change on hover - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Hover to change

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Hover to change

Description

Class change on hover

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mor</title> 
  <style>
img {<!--   ww w . j  ava  2  s. com-->
   width:301px;
   height:301px;
}

img#my {
   -webkit-filter:grayscale(2);
   -webkit-filter:grayscale(100%);
   filter:gray;
   filter:;
   filter:grayscale(100%);
   -webkit-transition:all 0.6s;
   transition:all 0.6s;
}

img#my:hover {
   -webkit-filter:grayscale(0);
   filter:none;
   filter:grayscale(0);
}
</style> 
 </head> 
 <body translate="no"> 
  <img src="https://www.java2s.com/style/demo/InternetExplorer.png" alt="" title="" id="my"> 
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> 
   <filter id="greyscale"> 
    <fecolormatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
                                          0.3333 0.3333 0.3333 0 0
                                          0.3333 0.3333 0.3333 0 0
                                          0      0      0      1 0" /> 
   </filter> 
  </svg>  
 </body>
</html>

Related Tutorials