透过暗覆盖css和jquery看

我正在做一个带有"隐藏"图像的网站.我使用黑色叠加隐藏图像,但现在我希望光标透过黑色叠加层.

这里有一个几乎可行的例子:https://jsfiddle.net/swx5x38j/

我想知道的是,我如何通过黑暗叠加div使光线div看起来.这是不可能的,或者我应该采取不同的解决方案？有些人对这样的暗示吗？

代码也在这里.首先是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;
}

jquery如下

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

最后是HTML

G-Cyr.. 5

而不是叠加,你可以使用盒子阴影:

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

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