Focus DOM above overlay

Question

Am trying to make a whole screen overlay, and just pop a single DOM above it, it is kind of web game tutorial which tell the user which button he should press.

Like the above image illustrate, am trying to hide everything under the overlay and only pop the red icon above it

What I've tried so far

I've added a div directly under the body tag (this will be the overlay) that will have a z-index greater that other elements in the page, and only the focused DOM will have a greater z-index than the overlay

Issue

This didn't work because am having a translate for the opts-container element, and remove this style is not an option for me because am using it all over the elements.

code (to illustrate)

$("#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, 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>

possible solutions in my mind

1- make clipped overlay

2- clone the focused object to be inside the veil div

3- focus the parent of the object and reduce opacity of child elements (workaround)

how can I pop an element over an overlay even if it has a transform style ?

maybe a hack around ?

you need position to be able to use z-index; add position:relative to your element and it will work — Temani Afif, Nov 26 '19 at 22:44
DOM stands for Document Object Model. There aren't multiple DOMs, it's just a thing that lets you interact with the markup of the page in object form. The word you're looking for is "element". — Mason, Nov 26 '19 at 22:47
@TemaniAfif There was more to the question that just z-indexes. There's also the issue of having one element on top of the other blocking the events from getting triggered. You closed the question before I could post the answer. I think it should be reopened. — Mason, Nov 26 '19 at 23:07
@Mason the question is: *am trying to hide everything under the overlay and only pop the red icon above it* then he showed where he failed and the issue was the miss of position:relative. If there is more than that then the question need to be edited to highlight that correcting the position isn't the only fix. — Temani Afif, Nov 26 '19 at 23:11
I can't post it as an answer but here is how I'd do it https://jsfiddle.net/ct7oyf2e/ — Mason, Nov 26 '19 at 23:14
@TemaniAfif Look like I forgot to add ``transform:translateX()`` to my snippet, it is not related to the other question you mentioned as I've added ``position:relative`` but it didn't work, please check the snippet again — shamaseen, Nov 26 '19 at 23:26
I add two others duplicate related to the transform. If you cannot remove it then it's dead, you can do nothing because transform will create a stacking context and all its content will fall inside and you have no way to move only one element above another one from the outside of the stacking context — Temani Afif, Nov 26 '19 at 23:29
@TemaniAfif I can't remove the transformation because it is a game and I'm using this transformation all over the elements, there got to be a hack to simulate this overlay, please open the question and let people share their knowledge, perhaps someone has a hack ! — shamaseen, Nov 26 '19 at 23:37
@TemaniAfif I've also edit the question to point out to the real problem — shamaseen, Nov 26 '19 at 23:47

score 1 · Accepted Answer · answered Nov 26 '19 at 23:51

Consider a big box-shadow on the element instead of an overlay:

#opts-container {
  width: 100%;
  position: relative;
  transform:translateX(50px)
}


.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;
}

/* Make sure the stacking context is also on the top */
#opts-container:hover {
  z-index:9999;
}
/* make the element on the top and add a big shadow
   100vw + 100vh will make sure that you will cover all the screen
   Or use any other big value
*/
#opts-container:hover  #policy {
  position:relative;
  z-index:9999;
  box-shadow:0 0 0 calc(100vw + 100vh) rgba(0,0,0,0.5);
}

    <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>

Focus DOM above overlay

1 Answers1