Is There Any Way To Colorize Only Part Of Image On Hover?

October 07, 2024 Post a Comment

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 hover (or 10x1

Solution 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);
})

<svgid="img"width="600"height="300"viewBox="0 0 600 300"><defs><filterid="f"filterUnits="userSpaceOnUse"><feColorMatrixtype="saturate"values="0" /></filter><maskid="m"maskUnits="userSpaceOnUse"x="0"y="0"width="600"height="300"><circleid="c"cx="-40"cy="-40"r="40"fill="white" /></mask></defs><imagefilter="url(#f)"width="600"height="300"xlink:href="http://www.lorempixel.com/600/300" /><imagemask="url(#m)"width="600"height="300"xlink:href="http://www.lorempixel.com/600/300" /></svg>

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

CodePen

enter image description here

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);
});

<svgid="img"width="600"height="300"viewBox="0 0 600 300"><defs><radialGradientid="r"gradientUnits="userSpaceOnUse"cx="300"cy="150"r="400"fx="300"fy="150"><stopoffset="0%"stop-color="white" /><stopoffset="10%"stop-color="white" /><stopoffset="12%"stop-color="black" /><stopoffset="100%"stop-color="black" /></radialGradient><filterid="f"filterUnits="userSpaceOnUse"><feColorMatrixtype="saturate"values="0" /></filter><maskid="m"maskUnits="userSpaceOnUse"x="0"y="0"width="600"height="300"><pathd="M0,0 h600 v300 h-600z"fill="url(#r)" /></mask></defs><imagefilter="url(#f)"width="600"height="300"xlink:href="http://www.lorempixel.com/600/300" /><imagemask="url(#m)"width="600"height="300"xlink:href="http://www.lorempixel.com/600/300" /></svg>

Solution 2:

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

<divclass="greykitty"><divclass="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 codepen: http://codepen.io/fontophilic/pen/XJpVje/

Solution 3:

You can wrap you image in a HTML Element and add a div element element with 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: 00060emrgba(0,0,0,.5)
}

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

Solution 4:

Base on this, i have solution for your problem:

Use mark to overlay image

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

Grayscale on mark instead of image's container

 .container .bg-image { 
       opacity:0.3;
    -moz-filter: url("data:image/svg+xml;utf8,<svgxmlns=\'http://www.w3.org/2000/svg\'><filterid=\'grayscale\'><feColorMatrixtype=\'matrix\' values=\'0.33330.33330.3333000.33330.33330.3333000.33330.33330.33330000010\'/></filter></svg>#grayscale");
         -o-filter: url("data:image/svg+xml;utf8,<svgxmlns=\'http://www.w3.org/2000/svg\'><filterid=\'grayscale\'><feColorMatrixtype=\'matrix\' values=\'0.33330.33330.3333000.33330.33330.3333000.33330.33330.33330000010\'/></filter></svg>#grayscale");
         -webkit-filter: grayscale(100%);
         filter: gray;
         filter: url("data:image/svg+xml;utf8,<svgxmlns=\'http://www.w3.org/2000/svg\'><filterid=\'grayscale\'><feColorMatrixtype=\'matrix\' values=\'0.33330.33330.3333000.33330.33330.3333000.33330.33330.33330000010\'/></filter></svg>#grayscale");
    height:455px;
    width:606px;
}

set opacity = 0 on highlight-region

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

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

Html5 Tutorial