1.0 KiB
Layers with different opacity are a staple of digital compositing systems but weirdly CSS is terrible at it. The stack/layer CSS in static/global.csS implements a simple method using display: grid to place elements into a single cell. The CSS grid system will then correctly layer each element in a stack. The elements also are set to position:relative so you can change their z-index to shuffle them around. Alternatively, you can simply set one of the children to class="top" and that one element will be on top.
If you don't set a background-color color then the layers will be transparent. You can also use opacity to hide or fade the layers in the stack.
The CSS that is making this work is below (but look in static/global.css to confirm it's still done this way.
.stacked {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
grid-template-areas: "cover";
}
.stacked .layer {
width: 100%;
position: relative;
grid-area: cover;
}
.stacked .top {
z-index: 10;
}