试图覆盖整个屏幕，并在其上方弹出一个DOM，这是一种网络游戏教程，告诉用户应该按下哪个按钮。
如上图所示，我试图将所有内容隐藏在叠加层下，仅弹出其上方的红色图标
到目前为止我尝试过的事情
我在body标签下直接添加了一个div（将是叠加层），该标签的z-index值比页面中的其他元素大，并且只有聚焦的DOM的z-index值比页面中的其他元素大。重叠
问题
这没有用，因为translate元素有一个opts-container，对于我来说，删除此样式不是一种选择，因为在所有元素上都使用了它。
代码（以说明）
$("#veil").hide();
$('.icons-group-s div').on('mouseenter',function(){
console.log("hovered");
$("#veil").show();
})
$("#veil").on('mouseleave',function(){
console.log("hide");
$("#veil").hide();
});#opts-container {
width: 100%;
position: relative;
transform:translateX(50px)
}
#veil {
width: 100%;
height: 100%;
background: rgba(0,0.7);
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
.icons-group-s {
height: 500px;
text-align: center;
padding-top: 10px;
position:absolute;
top: 0;
}
.icons-group-s div {
width: 100px;
height: 100px;
background: #f00;
margin-left: 10px;
display: inline-block;
position: relative;
}
#policy {
z-index: 102;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="veil">
</div>
<div id="opts-container" class="hor menu-bottom">
<div class="icons-group-s">
<div id="policy" class="text-under-icon"></div>
<div id="military" class="text-under-icon" ></div>
<div id="socity" class="text-under-icon"></div>
<div id="eco" class="text-under-icon" ></div>
<div id="inventory" class="text-under-icon" ></div>
</div>
</div>
我脑海中可能的解决方案
1-制作修剪的叠加层
2-将聚焦对象克隆到面纱div
3-集中对象的父对象并减少子元素的不透明度（解决方法）
即使元素具有transform样式，如何在覆盖上弹出元素？
也许是黑客吗？