<p>Lorem ipsum...</p>
<details class="spoiler" style="--hidden: 'Darth Vader is Anakin Skywalker, the father of Luke Skywalker.'">
<summary>Spoiler about Star Wars</summary>
<div>Darth Vader is Anakin Skywalker, the father of Luke Skywalker.</div>
</details>
<p>...dolor sit met...</p>
<details class="spoiler" style="--hidden: url(https://i.pinimg.com/474x/69/77/b7/6977b70a129ec184527433bbdf9fe457.jpg)">
<summary>Warning: graphic content</summary>
<div><img src="https://i.pinimg.com/474x/69/77/b7/6977b70a129ec184527433bbdf9fe457.jpg" alt="cat" /></div>
</details>
<p>...consectetur adipiscing elit.</p>
details.spoiler summary::after {
content: var(--hidden);
filter: blur(4px);
display: block;
}
details[open] summary::after {
display: none;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.