Skip to content

Instantly share code, notes, and snippets.

@wizard04wsu

wizard04wsu/fuzzySpoiler.htm

Last active June 20, 2023 01:41
Show Gist options
  • Save wizard04wsu/a6312c18dbf75da063c3907f00235336 to your computer and use it in GitHub Desktop.
Save wizard04wsu/a6312c18dbf75da063c3907f00235336 to your computer and use it in GitHub Desktop.
Download ZIP
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.
Raw
fuzzySpoiler.htm
<!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>
@wizard04wsu
Copy link
Author

https://jsfiddle.net/wizard04/asht7yj1/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment