Reveal Spoiler Text On Hover – InvisiText.css

Preview:

Description:

InvisiText.css is a pure CSS solution to Spoiler Text that allows the visitor to reveal any text on hover.

How to use it:

Import the stylesheet InvisiText.css into your project.

<link href="invisi-text.min.css" rel="stylesheet">

Wrap the spoiler text in an ink tag and specify the reveal/hide effect in the data-type attribute:

• sharp-hover: Basic show/hide effects.
• ease-in: With an easing effect.
• blurred: With a blur effect.
• redacted: With a redact effect.

<ink data-type="sharp-hover">Spoilers</ink>
<ink data-type="ease-in">Spoilers</ink>
<ink data-type="blurred">Spoilers</ink>
<ink data-type="redacted">Spoilers</ink>

Add a border as the underline to the spoiler text:

<ink data-type="sharp-hover"
     data-border="solid">
     Spoilers
</ink>