Reveal Spoiler Text On Hover – InvisiText.css


Author: kiedtl
Views Total: 925 views
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>

See also  6 Loading Animations In Pure CSS

Leave a Reply

Your email address will not be published. Required fields are marked *