Css hover to use filter to change image color - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Hover Image

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Hover Image

Description

Css hover to use filter to change image color

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
img.grayscale {<!--  w ww  . ja  v  a2  s. co  m-->
   filter:url('https://www.java2s.com/style/demo/Google-Chrome.png');
   filter:gray;
   -webkit-filter:grayscale(100%);
   -webkit-transition:all .7s ease;
   -webkit-backface-visibility:hidden;
   -webkit-transition-delay:4s;
   transition-delay:4s;
}

img.grayscale:hover {
   filter:none;
   -webkit-filter:grayscale(0%);
}

svg {
   background:url('https://www.java2s.com/style/demo/Google-Chrome.png');
}

svg image {
   transition:all .7s ease;
}

svg image:hover {
   opacity:0;
}
</style> 
 </head> 
 <body> 
  <p>Lorem ipsum dolor sit amet, co</p> 
  <img class="grayscale" src="https://www.java2s.com/style/demo/Google-Chrome.png" width="400"> 
  <p>Lorem ipsum dolor si</p> 
  <svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewbox="0 0 400 377" width="400" height="377"> 
   <defs> 
    <filter id="filtersPicture"> 
     <fecomposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" /> 
     <fecolormatrix id="filter_38" type="saturate" values="0" data-filterid="38" /> 
    </filter> 
   </defs> 
   <image filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://www.java2s.com/style/demo/Opera.png" /> 
  </svg>  
 </body>
</html>

Related Tutorials