Home is it possible to make transparent box shows what's behind opaque background

Questions

is it possible to make transparent box shows what's behind opaque background

February 2, 2022

I’m working on an image cropping project. I made an overlay above the image. and a moving transparent box above them all.

I need to show a part of the image through the moving transparent box, although there is an overlay between them.

var imgCropper = document.getElementById("imgCropper");
dragElement(imgCropper);
function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (imgCropper) {
    imgCropper.onmousedown = dragMouseDown;
  } else {
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

#frame{
  width: fit-content;
  border: 1px solid black; 
  position:relative; 
  overflow: hidden;
  z-index: 0;
}

#overLay{  
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
  background-color: rgba(0,0,0,.5);
}

#imgCropper {
  position: absolute;
  z-index: 3;
  color: #fff;
  background-color::transparent;
  text-align: center;
  border: 1px solid #d3d3d3;
  cursor: move;
  width: 300px;
  height: 100px;
    
  display: flex;
  justify-content: center;
  align-items: center;
}

<div id="frame">
<div id="overLay">
<div id="imgCropper">
  Crop Image
</div>
</div>
<img src="https://m.media-amazon.com/images/I/61r8Bx96OBS._AC_SL1500_.jpg" width="700" />
</div>

please help ..
How can I do that? to see the image through the moving box

>Solution :

Make the overlay a big box-shadow instead:

var imgCropper = document.getElementById("imgCropper");
dragElement(imgCropper);
function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (imgCropper) {
    imgCropper.onmousedown = dragMouseDown;
  } else {
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

#frame{
  width: fit-content;
  border: 1px solid black; 
  position:relative; 
  overflow: hidden;
  z-index: 0;
}

#overLay{  
  position: absolute;
  inset:0; /* to simplify left/top/width/height */
  z-index: 2;
  overflow:hidden;
}

#imgCropper {
  position: absolute;
  color: #fff;
  border: 1px solid #d3d3d3;
  box-shadow:0 0 0 200vmax rgba(0,0,0,.5);
  cursor: move;
  width: 300px;
  height: 100px;
    
  display: flex;
  justify-content: center;
  align-items: center;
}

<div id="frame">
<div id="overLay">
<div id="imgCropper">
  Crop Image
</div>
</div>
<img src="https://m.media-amazon.com/images/I/61r8Bx96OBS._AC_SL1500_.jpg" width="700" />
</div>