What is an overlay effect?

Question

What is an overlay effect?

Answer

An overlay is a semi-transparent element that we can place over elements (often images) for artistic flair and/or to enhance readability. For a visual example, take a look at these overlay demos.

11 Likes

Can you elaborate on this with an example?

Consider an element that is absolutely positioned to be directly above another element.

If that element is a DIV with a white background and 50% alpha-transparency, we can see through it.

I call this onion skin but it may go by other names. The alpha channel is the key. That is where the masking takes place.

12 Likes

Thank you Roy:smile::smile::smile::smile::smile:

4 Likes

can’t we change the opacity of the text/background alone?

Opacity of text can be changed using opacity for specific selector (maybe). I have tried changing opacity of the texts in p selector using -

p {
font-weight: bold;
font-size: 18px;
font-family: Helvetica;
color: AliceBlue;
line-height: 1.3em;
text-align: left;
width: 100%;
opacity: 0.5;
}

It resulted in fading the color of the text. so yes it worked.

But when i changed the background opacity in body, all the other elements including text, image also had changed it’s opacity.
I found this article helpful, in changing background opacity without having impacts on text.

1 Like

Opacity is an alpha layer that we can invoke. We need to be clear on the inheritance aspect when getting selective.

How can I change the opacity of the background while keeping the text fully opaque?

When setting the background, use an rgb color value that includes the alpha layer.

Eg.

background-color: rgba(128, 192, 255, 0.4);

https://repl.it/@mtf/input-and-script-access

Ignore the general intent of that page but play with the alpha value in the selector rule. Enter a name so the text appears.