JSFiddle - React, Tailwind, and code Playground

by WarrenBee

HTML

<div id="backgroundOverlay"></div>
<div id="test">Delete the yellow background color and add your background image.</div>

CSS

*{
    margin: 0;
    padding: 0;
}

body{
    width: 100%;
    height: 100%;
    /* delete the yellow background color and add your image */
    background-color:yellow;
}

#backgroundOverlay{
    background-color: #000;
    opacity:0.5;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
   filter: alpha(opacity=50);
    position: absolute;
    z-index: 0;
}

#test{
    width:300px;
    height:300px;
    margin:0 auto;
    background-color: red;
    position: relative;
    z-index: 1;
}

JavaScript

var docHeight = $(document).height();
    var docWidth = $(document).width();
    
    $('#backgroundOverlay').css({
        width: docWidth, 
        height: docHeight
    });
    
    $('#test').mouseenter(function() {
        $('#backgroundOverlay').stop().fadeTo("slow", 0.1);
    });
    
    $('#test').mouseleave(function() {
        // it fades to an opacity, which is the same as the CSS opacity value.
        $('#backgroundOverlay').stop().fadeTo("slow", 0.5);
    });