JSFiddle - React, Tailwind, and code Playground

HTML

this is some text
<div id="div1" class="dimmable">hello</div>
<div id="div2" class="dimmable">goodbye</div>
<div id="dim"></div>

CSS

body {
    color: red;
}
#div1 {
    width: 100px;
    height: 100px;
    border: 2px solid green;
    margin: 10px;
    background-color: #8f8;
}
#div2 {
    width: 200px;
    height: 50px;
    border: 2px solid blue;
    margin: 20px;
    background-color: #88f;
}
.dimmable {
    position: relative;
}
#dim {
    background-color: rgba(0,0,0,.5);
    display: none;
    position: absolute;
    left: 0;
    top: 0;
}

JavaScript

$('div.dimmable').hover(function() {
    $(this).css('z-index', 101);
    $('#dim')
      .css('z-index', 100)
      .width($(window).innerWidth())
      .height($(window).innerHeight())
      .fadeIn();
}, function() {
    var dimmable = $(this);
    $('#dim').fadeOut({complete: function() {
        dimmable.css('z-index', 99);
    }});
});