title: Mask the image/maps/div (circle) using css and jquery
body: <p>Objective:
  to mask the google maps using a translucent mask and clearly visible inside the circle only.
  <a href="http://codepen.io/vipulsharma144/pen/zGwyxR" rel="nofollow">Demo</a> <br />
  <a href="https://drive.google.com/file/d/0B_AthEN4pOPVZ25NdC1kazFNS3M/view?usp=sharing" rel="nofollow">image here</a>  <br />
  In the Image attached i want to invert the background as the maps should be translucent outside the circle and completely visible inside the circle <br />
  some of snippets of my HTML</p>
  
  <pre><code>HTML
  &lt;div id = "blur" class="blurit"&gt;
  
  &lt;div id="map-canvas" &gt;  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="wrapper" class="circlewrapper"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So i have a parent div(blur) and child div(map-canvas) there is another div which draws circle( wrapper)
   .CSS</p>
  
  <pre><code>#map-canvas{
          position: absolute;
          width: 100%;
          height: 100%;   
          background-color:grey;
          border solid green 3px;
  
  }
  .circlewrapper{
    width: 50px;
    height: 50px;
    border-radius: 50%; 
    background:rgba(0,0,0,0.8);
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    overflow:hidden;
    border:solid 4px red;
  
  
  
  
  }
  </code></pre>