I have a div, which contains an iframe with map and another div overlapping the map.
HTML
<div class="locationFinder">
<iframe width="100%" height="100%" frameborder="0" scrolling="no"
marginheight="0" marginwidth="0"
src="https://maps.google.com/?ie=UTF8&t=m&ll=37.449105,-122.16048&spn=0.003918,0.009634&z=16&output=embed">
</iframe>
<div class="mapover">
<p class="titleTextM">Want to learn more?</p>
</div>
</div>
CSS
.locationFinder {
position: relative;
width: 100%;
height: 425px;
background-repeat: no-repeat;
}
.mapover {
position: absolute;
top: 0;
width: 100%;
height: 428px;
background-repeat: no-repeat;
background: black;
opacity: .5;
}
The second div is over map. so I can't perform any operation on it. so my requirement is , user still be able to use the map . Is there any way i can achieve this?