Last active
June 20, 2023 01:41
-
-
Save wizard04wsu/a6312c18dbf75da063c3907f00235336 to your computer and use it in GitHub Desktop.
CSS to obfuscate text until you hover over it. I got this idea from https://www.reddit.com/r/MumboJumboFanServer/ where similar CSS is used to hide spoilers.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>CSS to obfuscate text</title> | |
| <style> | |
| .spoiler:not(:hover), .spoiler:not(:hover) * { | |
| color:transparent !important; | |
| } | |
| .spoiler:not(:hover) { | |
| text-shadow:0 0 12px #4D5763; | |
| } | |
| .spoiler { | |
| transition:color 0.25s ease, text-shadow 0.25s ease; | |
| } | |
| .spoiler * { | |
| transition:color 0.25s ease; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <span class="spoiler">This awesome <span style="color:red;">spoiler</span> has a <a href="#">link</a>!</span> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://jsfiddle.net/wizard04/asht7yj1/