Anchors a div to the entire screen.

HTML

<!-- I created a random div to act as the background. I postioned it over the entire screen, made it black, then made it unseeable and unable to be interacted with. When needed, it fades back into visible -->
<div class="bg"> </div>

<!-- An example botCard used for demo purposes -->
<div class="botCard">
  <p> Some random text </p>
</div>

<!-- Some random text for demo purpose -->
<p>This is random text</p>

CSS

/* Don't worry about this */
.botCard{
    height: 200px;
    width: 100px;
    background: gray;
    color: white;
}

body{
    margin: 0;
    padding: 50px;
}
/* ^ Don't worry about this ^ */

/* The "botCard" */
.botCard{
  transition: transform 2s; /* Transition time for the growing / shrinking */
}

/* the "botCard" on hover/focus (focus = interact) */
.botCard:hover, .botCard:focus{
    position: relative; /* Important but a little complicated (also already applied to the JAI botcard, so don't worry too much about it */

    transform: scale(1.2); /* Increases size */
    z-index: 1000; /* Moves to the front */
}

/* The "bg" */
.bg{
    /* The background color */
    background: black; 
    /* Moves to the front (Make sure this number is smaller than anything you want in front of it) */
    z-index: 900;
    /* The below makes it fills the entire screen */
    position: absolute; 
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    /* Makes it able to be clicked through */
    pointer-events: none;
    /* Makes it invisible by default*/
    opacity: 0;
    /* The transition time */
    transition: opacity 1.5s;
}

/* if the botCard is being hovered or focused, then affect the background with this CSS*/
html:has(.botCard:hover) .bg, html:has(.botCard:focus) .bg{
    /* Becomes visible (1 is completely visible) */
    opacity: 0.9;
}