Background Color On A Specific Area Of An Element

what I want to achieve is to put a hover effect on a position of a cursor.. something like this: https://drmportal.com/ Here's a fiddle: https://jsfiddle.net/onnmwyhd/ Here's my co

Solution 1:

In your reference website it uses canvas, check out this fiddle for the exact result

JSFiddle

HTML

<div id="container" class="stalker">
    <canvas id="canvas" width="1600" height="433"></canvas>
</div>

CSS

.stalker {
    background-color: #6fc39a;
    height:200px;
    border-top-color: rgba(168, 228, 165, 0.7);
    border-bottom-color: rgba(53, 162, 142, 0.3);
}

JavaScript

var stalker = $('.stalker');

var canvas = $('#canvas')[0];

var ctx = canvas.getContext('2d'), gradient, initialized = false;

$("#container").mousemove(function(e){
    setTimeout(function(){
        initialized = true;
        canvas.width  = stalker.width();
        canvas.height = stalker.height();
        gradient = ctx.createRadialGradient(e.pageX, e.pageY, 0, e.pageX, e.pageY, canvas.width);
        gradient.addColorStop(0, stalker.css('border-top-color'));
        gradient.addColorStop(1, stalker.css('border-bottom-color'));
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, canvas.width, canvas.height);

    }, initialized ? 200 : 0);
});

Solution 2:

Try adding span element to #container to hold cursor values to avoiding overwriting html of element; adding div element to #container with css position set to absolute , left set to x, top set to y to use for tracking cursor with div

$(function() {
  $("#container").mousemove(function(e) {
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    $("div", this).css({
      left: x - (75 / 2),
      top: y - (75 / 2)
    })
    $("span", this).html("X: " + x + " Y: " + y);
  }).mousemove();
})

#container {
  background-image: -webkit-linear-gradient(-35deg, #35a28e, #a8e4a5);
  background-image: linear-gradient(125deg, #35a28e, #a8e4a5);
  background-color: #6fc39a;
  height: 200px;
}
#container div {
  background-image: -webkit-linear-gradient(-35deg, #35a28e, #a8e4a5);
  width: 75px;
  height: 75px;
  position: absolute;
  border-radius: 100px;
  opacity: 0.5
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

<div id="container">
  <span></span>
  <div></div>

</div>

JSFiddle https://jsfiddle.net/onnmwyhd/2/