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

You could do this using svg's mask and filter.

CodePen

var img = document.getElementById('img');
img.addEventListener('mousemove', function(e) {
  document.getElementById('c').setAttribute('cx', e.clientX - img.getBoundingClientRect().left);
  document.getElementById('c').setAttribute('cy', e.clientY - img.getBoundingClientRect().top);
})

---

You could also get a smooth transition on the circle edges by using radialGradient.

CodePen

var img = document.getElementById('img');
img.addEventListener('mousemove', function(e) {
  var x = e.clientX - img.getBoundingClientRect().left;
  var y = e.clientY - img.getBoundingClientRect().top;
  document.getElementById('r').setAttribute('fx', x);
  document.getElementById('r').setAttribute('fy', y);
  document.getElementById('r').setAttribute('cx', x);
  document.getElementById('r').setAttribute('cy', y);
});