Entrance Chat Gallery Search Everyone Wiki Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
July 11, 2025 - @680.24 (what is this?)
Activity rating: Three Stars Posts & Arts: 32/1k.beats Unread Topics | Unread Replies | My Stuff | Random Topic | Recent Posts Start New Topic  Submit Art
News: :4u: ~~~~~~~~~~~  :4u: Super News: In the EU? Sign the Stop Killing Games Petition!

+  MelonLand Forum
|-+  World Wild Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ I need Help!
| | | |-+  spoiler/block out text within paragraphs


« previous next »
Pages: [1] Print
Author Topic: spoiler/block out text within paragraphs  (Read 341 times)
mothpanic
Casual Poster ⚓︎
*


mrrp

⛺︎ My Room

View Profile WWW

Joined 2025!
« on: March 08, 2025 @651.15 »

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!
Logged

meow        
Melooon
Hero Member ⚓︎
*****


So many stars!

⛺︎ My Room
SpaceHey: Friend Me!
StatusCafe: melon
iMood: Melonking
Itch.io: My Games
RSS: RSS

View Profile WWWArt

a silly heart 4 melon :)Ozwomp wants to know your locationHyperactive DonutGreat Posts PacmanOfficially DogThanks for being rad!
« Reply #1 on: March 08, 2025 @693.19 »

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>
« Last Edit: March 08, 2025 @695.61 by Melooon » Logged


everything lost will be recovered, when you drift into the arms of the undiscovered
mothpanic
Casual Poster ⚓︎
*


mrrp

⛺︎ My Room

View Profile WWW

Joined 2025!
« Reply #2 on: March 08, 2025 @834.42 »

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!
Logged

meow        
Pages: [1] Print 
« previous next »
 

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021 | Privacy Notice | ~ Send Feedback ~ Forum Guide | Rules | RSS | WAP | Mobile


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi