如何使用javascript html和css获得这种效果？

实际上，我正在尝试使用javascript实现这种效果，需要一些帮助来实现它

从此处查看图像：-

我的代码：

功能移动（e）{
log（“鼠标位置：”，e.clientX，e.clientY）；
设x=e.clientX-520；
设y=e.clientY-210；
让ele=document.getElementsByClassName（'after'）[0]；
ele.style.transform=“translate3d（“+x+”px，+y+”px，0px）”
}
var-temp=false；
函数切换（）{
温度=！温度；
如果（临时）{
让ele=document.getElementsByClassName（'after'）[0]；
ele.style.display='block'；
}否则{
让ele=document.getElementsByClassName（'after'）[0]；
ele.style.display='none'；
}
}

img{
z指数：100；
}
.之后{
位置：绝对位置；
左：0；
底部：0；
边界半径：50%；
宽度：20%；
身高：20%；
显示：块；
背景：白色
}
.图像容器{
保证金：0自动；
位置：相对位置；
溢出：隐藏；
宽度：最大含量；
高度：最大含量；
}

切换

您想要bulr效果吗？基本上不需要。当我单击“切换”按钮时，将出现一个黑色框，它将覆盖整个图像，因此当我将光标放在该黑色框的任何部分时，我希望显示我的图像该部分（隐藏在框后面）