0

Objective: to mask the google maps using a translucent mask and clearly visible inside the circle only. Demo
image here
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
some of snippets of my HTML

HTML
<div id = "blur" class="blurit">

<div id="map-canvas" >  </div>
</div>
<div id="wrapper" class="circlewrapper">
</div>

So i have a parent div(blur) and child div(map-canvas) there is another div which draws circle( wrapper) .CSS

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




}
vipul sharma
  • 61
  • 5
  • possible duplicate of [Change map opacity outside circle of Google Maps JavaScript API v3](http://stackoverflow.com/questions/19736418/change-map-opacity-outside-circle-of-google-maps-javascript-api-v3) – geocodezip Jun 08 '15 at 20:39
  • hello @geocodezip i have already read this . the circle i want does not use google API but is constructed via raw CSS and HTML. – vipul sharma Jun 08 '15 at 20:42
  • codepen example http://codepen.io/vipulsharma144/pen/zGwyxR – vipul sharma Jun 09 '15 at 18:16

0 Answers0