Creating a custom "spoiler" tag!

Lets talk about spoiler content!

Say you want to make a blog about a movie review, album review, or just want to add some spoiler blocks to your profile page to make them more interactive. As it stands right now, SpaceHey doesn't support such tags. But, we can make a class to do the exact same thing with very minimal effort which can be applied to text and images!

Here is an example of this in action:

Here it is in the

middle of a

sentence.

The image below is a stock image from Pexels.com

And here is the CSS I wrote to do it:

<style>
p{
 display: inline-block;
}
.spoiler{
 background: black;
 color: black;
 filter: brightness(0);
}
.spoiler:hover, .spoiler:focus {
 color: inherit;
 background: inherit;
 filter: brightness(1);
}
</style>

Now, lets talk about some of these things. I'm not going to discuss everything about this CSS, but I will discuss how to stylize it to your liking and maybe make them a bit more personal.

 background: black;
 color: black;
 filter: brightness(0);

The color of the background, color, and filter hide the image/text behind a black box. The text is hidden by the background and color property, and the filter is what hides the image(s). If you would like to change the color of the spoiler content simply change black to any color you'd like for both the color and the background. With all that being said, here is an example of some HTML you could use to display text with a spoiler shield:

<p class="spoiler">This is the text that will be hidden</p>

And with images....

<img class="spoiler" src="http://www.linkhere.com/abc.jpg"></img>

Basically, anything you put class="spoiler" in will be blocked out until you hover over it.
To use this in your blogs you simply add all the CSS above to the top or bottom of your blog and you will be able to apply spoilers to your content. Just make sure you are working in the HTML mode and not the WYSIWYG mode.

Well I think that's about it. Let me know if you have any questions and I'll try to help you out!