0

I have created an iframe with red transparent overlay. the iframe can be dragged to rotate earth. When i created a red overlay using CSS the iframe becomes non-clickable. Can we do something to keep the red overlay and make the iframe behind it clickable?

Screnshot: screenshot

 .overlay-effect {
      position: absolute; 
      width: 100%;
      height: 100%;
      border-radius:50%;
      clip-path: circle(160px at center);
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(255,0,0,0.5);
      z-index: 0;
    }
    .earth {
      width:400px;
      height:400px;
      border-radius:50%;
      left: 50%;
      top:50%;
      margin-left: -200px;
      margin-top: -200px;
      padding: 0px;
      position: absolute;
      clip-path: circle(160px at center);
      
    }
    
    
 <div class="earth">earth iframe</div>
 <div class="overlay-effect">.......</div>
نور
  • 1,425
  • 2
  • 22
  • 38
Kuwir Singh
  • 27
  • 4

2 Answers2

0

add pointer-events: none to the overlay More on pointer events

m_sultan
  • 433
  • 5
  • 14
0

Answer is pointer-events. Let me explain to you what is pointer-events. pointer-events property defines whether or not to react when user clicks on an element. Here is your final code. Try it . Also learn more about pointer-events here

.overlay-effect {
  position: absolute; 
  width: 100%;
  height: 100%;
  border-radius:50%;
  clip-path: circle(160px at center);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255,0,0,0.5);
  z-index: 0;
  pointer-events: none;   /* Added this */
}
.earth {
  width:400px;
  height:400px;
  border-radius:50%;
  left: 50%;
  top:50%;
  margin-left: -200px;
  margin-top: -200px;
  padding: 0px;
  position: absolute;
  clip-path: circle(160px at center);
  
}


<div class="earth">earth iframe</div>
<div class="overlay-effect">.......</div>
CODAR747
  • 230
  • 1
  • 12