undefinedtoken undefinedtoken - 2 years ago 151
Javascript Question

Masking an image to make it a view like binocular

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: enter image description here

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

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">


Answer Source

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" />
    <rect x="0" y="0" class="one" mask="url(#mask)" width="400" height="200" />

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download