<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.