spoiler/block out text within paragraphs

[mothpanic]

looking for a quick and convenient way to black out text in the middle of paragraphs and allow it to be clicked on to reveal the text underneath. importantly, I would really prefer to not use the details tag, as Im using it for other parts of the page.

one example that I might like to replicate is the way the images are censored on this page about Saya no Uta. warning that the game is quite dark and the images may be disturbing. if you don't want to open the link (that's valid), the images are completely blacked out and can be clicked to reveal them, and return to being blacked out once the mouse is no longer hovering over them. if you know how reddit spoilers look, that's also a nice example of what Im going for. I should have other examples, but I can't find any at the moment.

haven't had much luck with this yet, any help is appreciated!

[Melooon]

This should do the job! Although it will only unspoiler text while the mouse is hovering the text block. If you want it to stay unspoilerd with a click you'd need to use a JavaScript, but it sounds like this will mostly be what you'd like!

In your CSS style add - it just sets the text and background colour to the same thing - then undoes that when you hover.

Code

.spoiler {
  background-color: black;
  color: black;
}

.spoiler:hover {
  background-color: unset;
  color: inherit;
}

Then just add class="spoiler" to anything you wanna hide (use the span tag to stop it messing with any page layouts)

Code

<span class="spoiler">
    Hello this is a spoiler
</span>

[mothpanic]

This should do the job! Although it will only unspoiler text while the mouse is hovering the text block. If you want it to stay unspoilerd with a click you'd need to use a JavaScript, but it sounds like this will mostly be what you'd like!

man, Ive tried tweaking all sorts of code Ive found god knows where, and this is the first one that actually works! this is perfect, thank you so much!! :D

it’d probably be good for me to look into JavaScript, but, eh. some other time. still, it’s good to know what it can be useful for, so thanks again for that bit of info!