I'm faced with the challenge of manipulating the opacity or animating an array of items that are all contained within a single div. In addition to altering the opacity of each individual item, I also want to change the opacity of the entire div and its contents as a whole using a toggle. To complicate matters further, there is a separate div on the same page housing a series of toggles for controlling the animations.
My goal is to achieve this effect using only CSS — no javascript.
For a clearer demonstration, check out the example in the codepen below. I am specifically looking to toggle the visibility of every element within the div containing the blue circle. If the circle svg were located adjacent to or was a sibling of the toggle element, I could easily accomplish this using a combinator. Unfortunately, that's not the case here. Ideally, I would like to keep my animation controls separate from the actual content on the page.
In essence, I aim to fade out the light blue div along with the blue circle by deselecting the corresponding toggle animation checkbox in the green div. The nested structure of other divs complicates this task significantly. Let's assume that restructuring the div hierarchy is not a feasible solution unless a minor adjustment in selectors could magically simplify things.
I would greatly appreciate any references to examples of combinators or alternative methodologies that enable achieving similar effects using only CSS.
The specific snippet of code that is causing me trouble can be found at the end of the css section in the provided codepen. It resembles something like this:
/* --- Toggle .my-content div opacity --- */
input[type="checkbox"] + .my-content {
opacity: 0.15;
}
input[type="checkbox"]:checked + .my-content {
opacity: 1;
}
Naturally, the above code does not produce the intended outcome. What modifications should be made to make it work?