See using a dark chisel css and jquery

advertisements

I'm doing a site with a "hidden" image. I hide the image using a dark overlay, but now I want the cursor to see through the dark overlay.

An almost working example is here: https://jsfiddle.net/swx5x38j/

What I want to know is, how I make the light div look through the dark overlay div. Is this somehow possible, or should I go for different solution? And does some have a hint on such one?

The code follows here as well. First the CSS:

* {
  margin: 0;
  padding: 0;
}

#image {
  background: url(https://placeimg.com/640/480/animals) center no-repeat;
  width: 800px;
  height: 600px;
}

#overlay {
  opacity: 0.9;
  background: #000;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
}

#light {
  opacity: 1;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  background: #fff;
}

The jquery is as follow

    $(document).mousemove(function(event) {
    $('#light').offset({
        top: event.pageY - 50,
        left: event.pageX - 50
    });
});

And last the HTML

<div id="image"></div>
<div id="overlay"></div>
<div id="light"></div>


instead an overlay, you could use a box-shadow:

$(document).mousemove(function(event) {
  $('#light').offset({
    top: event.pageY - 50,
    left: event.pageX - 50
  });
});
* {
  margin: 0;
  padding: 0;
}

#image {
  background: url(https://placeimg.com/640/480/animals) center no-repeat;
  width: 800px;
  height: 600px;
}

#light {
  opacity: 1;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;box-shadow:0 0 0 3000px rgba(0,0,0,0.9);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image"></div>
<div id="light"></div>