iOS Invisible Ink on Websites

Worried about licensing?

Do you have right license for your templates and fonts?

Head over to our partner Envato Elements and unlock unlimited downloads of over 50 million digital assets with full commercial licensing.

  • 50+ Million Assets with Unlimited Downloads
  • Templates, Addons, Fonts, Footage, Photos, Brushes, Presets & More
  • Full Commercial licensing for client work

Get ultimate peace of mind!

Get Started Now
canvas deconstruction hidden content hover animation particle animation text animation
Image: iOS Invisible Ink on Websites GIF

In iOS 10 Apple included the Invisible Ink feature which allows people to send obfuscated messages to and from iPhone and iPads. With this snippet by Darryl Huffman you can recreate that same text effect on your webpages.

When you hover over the hidden text it reveals the hidden message.

If you are having trouble with the pen, try the archived copy on GitHub

iOS Invisible Ink Snippet

See the Pen Invisible Ink | Mouse Over! iOS 10 by Darryl Huffman (@darrylhuffman) on CodePen.0


Posted by:Saijo George

Digital Marketer with a strong focus on technical SEO and design. One of the top 100 makers on Producthunt, co-organizer of the SEO Meetup in Melbourne, an instructor at General Assembly. Worked with brands like Envato, AEON. Currently the SEO Strategy Director at Supple.