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

I suggest avoiding CSS filters, as it is not supported in IE at all, and doesn't look like it is in the pipeline either.

I also would prefer to greyscale my images in photoshop, to have more control over the color balance and contrast. (But I'm a designer as well).

Instead, I'm going to layer a full color image over a grayscale image, fix the position of the colorful background image, and move the position of the top div with jQuery:

HTML

SCSS with normalize.css

body{
  background-color:whitesmoke;
}

div{
  height: 400px;
  width: 600px;
  background-repeat: no-repeat;
}


.greykitty{
  background-image: url("http://lorempixel.com/g/600/400/cats/10/");
}

.colorfulkitty{
    background-image: url("http://lorempixel.com/600/400/cats/10/");
  $circlesize: 150px;
  height:  $circlesize;
  width:  $circlesize;
  border-radius:   $circlesize;
  background-attachment: fixed;
  position: absolute;

}

JS with jQuery

$('.greykitty').mousemove(function (colorize) {
    var X = colorize.clientX;
    var Y = colorize.clientY;
    $('.colorfulkitty').css("top", (Y - 75) + 'px');
    $('.colorfulkitty').css("left", (X - 75) + 'px');
});

And my codepen: http://codepen.io/fontophilic/pen/XJpVje/