Search code examples
javascriptjqueryhtmlcssoverlay

Focus DOM above overlay

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.

enter image description here

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 ?

Solution

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