Is there a way to colorize only part of the image when I hover over it?

Question

I would like to compose a simple picture in HTML, CSS, and possibly jQuery.

Let's say I have a source image, and I want to make it colorized, but only in the guidance part (or 10x10 pixels of the square or circle of the image where the cursor is).

I applied some filters to make it grayscale with CSS, but I have no idea how to colorize only the hover part (not the whole image).

An example of the image of the best result (saving colored tips would be great, but not necessary).

Answer 1

You can do this using svg 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); }) 

 <svg id="img" width="600" height="300" viewBox="0 0 600 300"> <defs> <filter id="f" filterUnits="userSpaceOnUse"> <feColorMatrix type="saturate" values="0" /> </filter> <mask id="m" maskUnits="userSpaceOnUse" x="0" y="0" width="600" height="300"> <circle id="c" cx="-40" cy="-40" r="40" fill="white" /> </mask> </defs> <image filter="url(#f)" width="600" height="300" xlink:href="http://www.lorempixel.com/600/300" /> <image mask="url(#m)" width="600" height="300" xlink:href="http://www.lorempixel.com/600/300" /> </svg> 

---

You can also get a smooth transition around the edges of the circle 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); }); 

 <svg id="img" width="600" height="300" viewBox="0 0 600 300"> <defs> <radialGradient id="r" gradientUnits="userSpaceOnUse" cx="300" cy="150" r="400" fx="300" fy="150"> <stop offset="0%" stop-color="white" /> <stop offset="10%" stop-color="white" /> <stop offset="12%" stop-color="black" /> <stop offset="100%" stop-color="black" /> </radialGradient> <filter id="f" filterUnits="userSpaceOnUse"> <feColorMatrix type="saturate" values="0" /> </filter> <mask id="m" maskUnits="userSpaceOnUse" x="0" y="0" width="600" height="300"> <path d="M0,0 h600 v300 h-600z" fill="url(#r)" /> </mask> </defs> <image filter="url(#f)" width="600" height="300" xlink:href="http://www.lorempixel.com/600/300" /> <image mask="url(#m)" width="600" height="300" xlink:href="http://www.lorempixel.com/600/300" /> </svg> 

Answer 2

You can wrap the image in an HTML element and add a div element using box-shadow

 $("figure").on('mousemove', function(e){ $('.shadow').css({ left: e.pageX - $(this).offset().left - 40, top: e.pageY - $(this).offset().top -40 }); }); 

 figure{ position: relative; margin: 20px auto; width: 480px; height: 480px; overflow: hidden } figure:hover .shadow{ opacity: 1 } img{ width: 100% } .shadow{ position: absolute; left: 80px; top: 60px; z-index: 1; background: transparent; width: 100px; height: 100px; opacity: 0; transition: opacity .3s ease; border-radius: 50%; box-shadow: 0 0 0 60em rgba(0,0,0,.5) } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <figure> <img src=http://i.imgur.com/orn8Dgf.jpg /> <div class=shadow></div> </figure> 

Answer 3

I suggest avoiding CSS filters because it is not supported at all in IE, and does not look like it is also under development.

I would also prefer grayscale in my photos in Photoshop to have more control over color balance and contrast. (But I am also a designer).

Instead, I'm going to overlay a full-color image on the grayscale image, fix the position of the colorful background image and transfer the position of the top div using jQuery:

HTML

 <div class="greykitty"> <div class="colorfulkitty" style="top: 150px; left: 280px;"> </div> </div> 

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 code: http://codepen.io/fontophilic/pen/XJpVje/

Answer 4

The basics on this , I have a solution for your problem:

• Use label to overlay image

   <div class="container">` <div class="bg-image"></div> <div class="highlight-region"></div> </div> 

• Grayscale on the label instead of the image container

    .container .bg-image { opacity:0.3; -moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><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>#grayscale"); -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><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>#grayscale"); -webkit-filter: grayscale(100%); filter: gray; filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><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>#grayscale"); height:455px; width:606px; } 

• set opacity = 0 in the selection area

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

The demo can be seen here: http://jsfiddle.net/MT4T7/438/