Hi all, Just trying to create a modal that zooms and blurs the background back. Based on avgrund by hakim https://lab.hakim.se/avgrund/ Now it has nesting modals also with the help of @deathshadow over at codingforums. Here is the current state: https://jsfiddle.net/postcolonialboy/1jz0q3xk/19/ Now, what I am trying to do is: by clicking the nested modal link, everything should be pushed back again and blurred - like simulating receding layers/depth of field. I've attached an image to explain this: https://ibb.co/LNB83jm Thanks
You might be able to layer the :checked part of my implementation to fake it. .toggle:checked ~ #content {/* blur + zoom depth 1 */} .toggle:checked ~ .toggle:checked ~ #content {/* blur + zoom depth 2 */} .toggle:checked ~ .toggle:checked ~ .toggle:checked ~ #content {/* blur + zoom depth 3 */} /* etc, etc */ The amount of blur being based on how many of the underlying checkboxes are out of focus. The problem would be getting the top-most ones to blur the underlying. Nesting could solve this, but it gets really complex, convoluted, and tricky. To that end with it already being an ice-skating uphill effect when it comes to accessibility, resulting in pages that are hard to navigate and difficult to read, I would NOT implement such a thing on a website. It's artsy fartsy crap that amounts to throwing code at a page for very little in terms of usability and functionality.