html - How to show an animation that is hidden behind a colored div using a "reveal" div on the surface

Question

Imagine that we have two layers of background.

• The bottom layer is green <div class="green"></div>. For simplicity, let's assume it's just a color. But in my project, this layer contains a css animation.

• And another layer of blue goes on top of it <div class="blue"></div>.

• Now, I want to have another div that goes on top of both, and it reveals the green background (animation layer in my project).

The closest example I can think of is if you imagine a spotlight. Everything seems black, and the spotlight moves around and reveals the background.

Essentially, that's what I have:

<div class="green">
    <div class="blue">
        <div class="reveal"></div>
    </div>
</div> 

It will look something like this. Just remember, the green layer is an animation in my project.

QUESTION: how can I complete the .reveal styles to achieve the above behavior.

• First div - draws .green background (animation)
• Second dv - draws .blue background goes on top of it
• Third/Fourth/... divs - Goes on top of both, but it reveals whatever the background First div draws

Note: First and Second div covers 100% of the available width and height.

.green {
    background-color: #159c82;
    width: 100vw;
    height: 100vh;
}

.blue {
    background-color: #1b4287;
    // I could change this to a sibling div and use,
    // position: absolute; but that seems unnecessary
    width: 100%;
    height: 100%;
}

.reveal {
    margin-top: 10px;
    margin-left: 10px;
    width: 200px;
    height: 50px;
    // not sure what else to put here to make it work
}

<div class="green">
    <div class="blue">
        <div class="reveal"></div>
    </div>
</div>

P.S. There is one approach I found that I did not like at all.

Answer 1

Use mask to create a hole and no need for the reveal div. You can later change the size and position to have the animation you want:

.green {
  background: linear-gradient(45deg,#159c82,red);
  height: 100vh;
}

.blue {
  background:#1b4287;
  height: 100%;
  -webkit-mask:
    /* you adjust this */
    linear-gradient(#fff,#fff) 
     50px 50px/ /*left top*/
     200px 20px, /*width height*/
    /**/
    linear-gradient(#fff,#fff); 
  -webkit-mask-repeat:no-repeat;    
  -webkit-mask-composite: destination-out;
  
  mask:
    /* you adjust this */
    linear-gradient(#fff,#fff) 
     50px 50px/ /*left top*/
     200px 20px, /*width height*/
    /**/
    linear-gradient(#fff,#fff);
  mask-repeat:no-repeat;    
  mask-composite:exclude;
  transition:.5s;
}
.blue:hover {
  -webkit-mask-position:100px 100px,0 0;
          mask-position:100px 150px,0 0;
  -webkit-mask-size:300px 50px,auto;
          mask-size:300px 50px,auto;
}

body {
  margin: 0;
}

<div class="green">
  <div class="blue">
  </div>
</div>