<aside>click anywhere to toggle containment</aside>
<div id="upside_down">
<div class="inside"></div>
<div class="outside">not painted</div>
<div class="partial">not painted</div>
</div>
<main>
<p id="desc">contain: none;</p>
<div class="inside"></div>
<div class="outside"></div>
<div class="partial"></div>
</main>
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
html {
cursor: pointer;
font-family: 'Open Sans', sans-serif;
height: 100%;
overflow: hidden;
}
body {
align-items: center;
background-color: #1d1e22;
color: white;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
margin: 0;
padding: 0;
}
aside {
left: 0;
margin: 20px 0;
position: fixed;
text-align: center;
top: 50px;
width: 100%;
}
main,
#upside_down {
background-color: #333;
border: 3px solid rebeccapurple;
height: 200px;
position: relative;
width: 200px;
div {
border: 2px solid #269b16;
height: 100px;
position: absolute;
width: 100px;
}
p {
margin: 5px;
text-align: center;
}
}
#upside_down {
opacity: 0;
position: absolute;
div {
align-items: center;
border-style: dotted;
color: #fff;
display: flex;
font-size: 14px;
justify-content: center;
}
}
main.paint {
contain: paint;
}
#upside_down.rift {
opacity: 0.25;
}
.inside {
left: 25%;
top: 25%;
}
.outside {
left: -60%;
top: -60%;
}
.partial {
left: 80%;
top: 80%;
}
View Compiled
const main = document.querySelector('main');
const desc = document.querySelector('#desc');
const ud = document.querySelector('#upside_down');
document.body.addEventListener('click', function () {
main.classList.toggle('paint');
ud.classList.toggle('rift');
desc.innerText = main.classList.contains('paint') ? 'contain: paint;' : 'contain: none;';
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.