Masking an image to make it a view like binocular

Question

I have been trying to get an output where an image is masked inside a binocular shaped element. The circular part moves with the mouse cursor and wherever the mouse goes it reveals the part of the image. Also need to set the mouse doesnt go out of the main container.

Image for the output:

The rest part will remain black and only the elements will be visible in that shape on mouse move.

I have tried the following code:

  $('.clipping-cursor').on('mousemove', function(e) {

    var parentOffset = $(this).parent().offset();
    var relativeXPosition = (e.pageX - parentOffset.left); //offset -> method allows you to retrieve the current position of an element 'relative' to the document
    var relativeYPosition = (e.pageY - parentOffset.top);

    $('.clipping-cursor').css({
      left: relativeXPosition,
      top: relativeYPosition
    });
  });

.collaborate-wrapper {
  width: 100%;
  height: 90vh;
  background: #000;
  overflow: hidden;
  position: relative;
}
.clipping-cursor {
  width: 1000px;
  height: 580px;
  box-sizing: border-box;
  position: absolute;
  margin-top: -290px;
  margin-left: -500px;
  background-image: url('../images/background/collaborate-2.svg');
  background-repeat: no-repeat;
  background-size: container;
  background-attachment: fixed;
  background-position: center center;
  -webkit-mask-image: url('../images/masking-circle.svg');
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  border: 1px solid #fff;
  cursor: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="collaborate-wrapper">
  <div class="clipping-cursor">

  </div>
</div>

Answer 1

You can do this with SVG and some JS to change position on mousemove

$(".a").mousemove(function(e) {
  var parentOffset = $(this).parent().offset();
  var relX = (e.pageX - parentOffset.left) - 55;
  var relY = (e.pageY - parentOffset.top) - 30;

  $('mask g').attr('transform', 'translate(' + relX + ',' + relY + ')');
});

.a {
  width: 400px;
  height: 200px;
  background: url('http://cdn.images.express.co.uk/img/dynamic/151/590x/secondary/Planet-Nine-443937.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
  display: inline-block;
}
svg {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
  <svg x="0px" y="0px" width="400px" height="200px" viewBox="0 0 400 200">
    <mask id="mask">
      <rect width="100%" height="100%" x="0" y="0" fill="white" />
      <g transform="translate(0, 0)">
        <circle cx="30" cy="30" r="30" />
        <circle cx="85" cy="30" r="30" />
      </g>
    </mask>
    <rect x="0" y="0" class="one" mask="url(#mask)" width="400" height="200" />
  </svg>
</div>