Question: is it possible to have some elements "grayed out"?

The big picture of what I'm trying to do

Hi! I'd like to have a "grayed out overlay" effect over several elements of the layout (and making them disabled). I assume adding a "disabled" attribute will be easy, but I have no idea currently how to do the "grayed out overlay" effect with SE.

The effect I'm aiming for is similar to what happens when a modal dialog box is displayed on a phone. The elements "below" get grayed out.

What I did

No idea ATM how to even approach doing this in the framework of SE.

In a previous HTML-based prototype of my app, for the elements I wanted to gray-out, I applied the following CSS:

.grayed-out {
    /* Mostly NOP, but force child position:absolute elements to be contained
       see: https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block
     */
    transform: translate(0,0);
}
.grayed-out:after {
    content: "";
    display: block;
    position: fixed;
    z-index: 1;
    top: 0; right: 0; bottom: 0; left: 0;
    background-color: rgba(85%,85%,85%, 75%);
}

— i.e., when I added a .grayed-out class to HTML elements, an extra "div" was generated over them, with gray color and 75% opacity.

Versions

Elm: like 0.18
style-elements: 4.3.0
Browser: Firefox 60.0.1
Operating System: Windows 10, Android 7

mdgriffith / style-elements