Reveal Spoiler Text On Hover – InvisiText.css

Category: CSS & CSS3 , Text | March 25, 2019
Views Total:1,265 views
Official Page:Go to website
Last Update:March 25, 2019


Reveal Spoiler Text On Hover – InvisiText.css


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"

You Might Be Interested In:

Leave a Reply