Reveal Spoiler Text On Hover – InvisiText.css

Category: CSS & CSS3 , Text | March 25, 2019
Author: kiedtl
Views Total: 247
Official Page: Go to website
Last Update: March 25, 2019
License: MIT

Preview:

Reveal Spoiler Text On Hover – InvisiText.css

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>

You Might Be Interested In:


Leave a Reply