Be right back v1 - Overlay

[cssmfc]

Full screen Overlay from Animated category.

Upon activation the overlay will show a section covering the full screen with editable text in the center.
Below the editable text there are 3 circles with different colors, each circle is changing the overlay background color at first click and on second click reverts to translucid (semi-transparent) black background.
The animation is played only once and it moves from bottom to top.

Online Demo

To change the text while live streaming use the OBS feature Interact

Under the hood:

Uses javascript for buttons to toggle the background adding a color class and removing additional classes.

function greenColor() {
 var element = document.getElementById("marketerbay");
element.classList.toggle("green");
element.classList.remove("red" , "blue");
};

function blueColor() {
 var element = document.getElementById("marketerbay");
element.classList.toggle("blue");
element.classList.remove("green","red");
};

function redColor() {
 var element = document.getElementById("marketerbay");
element.classList.toggle("red");
element.classList.remove("blue","green");
};

The CSS classes used for backgrounds
green , blue and red

Resources you might want to know about:

• If you want to change the background with other gradients, you can use the CSS Gradient Generator
• For buttons I've used SVG graphics from SVG Icons
• repo a simple (and single) html file

---

Author note: I'm not familiar with programming language (javascript in this particular case), so if there's another method which can be used but to achieve the same result, feel free to let me know and I'll test and update the overlay.