CSS how can I mask a div with other divs?

I have 4 html div’s in total. Please see the image below:
enter image description here

I want to have 2 draggable div‘s(blue with %20 opacity) which will reveal the intersection area with the underlying div.
enter image description here

I first thought about:

  1. Creating 2 img elements named as div3 / div4 and assigning same background-image as div2.
  2. Getting cursor position with javascript, for example with event.clientX
  3. Offset div3 and div4 background-position according to cursor position

However, when I try to transform div3 and div4, background-image will be distorted and they won’t have the mask effect anymore.

How can I mask a div(1) with another div(2) on top of another div(3)? I could use image-masking but it won’t be dynamic anymore. With a div, I can dynamically change info in the div.