How to show an animation that is hidden behind a colored div using a “reveal” div on the surface

Question

Imagine that we have two layers of background.

• The bottom layer is green

  . For simplicity, let\'s assum

Answer 1

If I understand you correctly you probably should use a css variable. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

Editing your example we get the following.

:root {
  --bottom-layer-color: #159c82
}

.green {
  background-color: var(--bottom-layer-color);
  width: 100vw;
  height: 100vh;
}

.blue {
  background-color: #1b4287;
  width: 100%;
  height: 100%;
}

.reveal {
  margin-top: 10px;
  margin-left: 10px;
  width: 200px;
  height: 50px;
  background-color: var(--bottom-layer-color)
}


  

    

  

cheers,

to change the color with css:

/* Use a later css file to redeclare the root variable,    */
/* this will override previously declared css. */
/* https://css-tricks.com/precedence-css-order-css-matters/ */
:root {
  --bottom-layer-color: powderblue
}

to change the color with javascript:

const eStyle = document.documentElement.style
eStyle.setProperty('--top-bar-height', '263px');

You can change a lot of things with css variables. Not just background-colors.

For instance

root: {
  --bottom-layer-color: #159c82
  --bottom-layer-radius: 50%;
  /* this would make the bottom layer a circle. And reaveal a circle. */
}

.green {
  background-color: var(--bottom-layer-color)
  border-radius: var(--bottom-layer-color)
  width: 100vw;
  height: 100vh;
}

.reveal {
  background-color: var(--bottom-layer-color)
  border-radius: var(--bottom-layer-color)
}

/* Set --bottom-layer-radius back to 0 to make both items square again. */