Is there any way to colorize only part of image on hover?

Question

I would love to code simple image painting in HTML, CSS and probably jQuery also.

Let\'s say I have a original image, and I want make it colorized but only in part of ho

Answer 1

Base on this, i have solution for your problem:

• Use mark to overlay image

  `
      
  
      
  
  
  

• Grayscale on mark instead of image's container

   .container .bg-image { 
         opacity:0.3;
      -moz-filter: url("data:image/svg+xml;utf8,#grayscale");
           -o-filter: url("data:image/svg+xml;utf8,#grayscale");
           -webkit-filter: grayscale(100%);
           filter: gray;
           filter: url("data:image/svg+xml;utf8,#grayscale");
      height:455px;
      width:606px;
  }
  

• set opacity = 0 on highlight-region

  .container div.highlight-region {
      height:150px; 
      width:150px;
      border-radius: 50%;
      opacity:0;
  }
  

Demo can see here: http://jsfiddle.net/MT4T7/438/