Is it possible to recreate this effect with text rather than an image?

The top example specifically:

http:开发者_JS百科//jsbin.com/ococal/3

To be precise, I'd like to use a <p> instead of a background image.

It is possible. Generally, you have to place your text inside #reveal and offset it by the same number of pixels that #reveal is moved, but negative.

Demo.

You can use a square white image with a transparent circle in the middle and just position it around, and then have different elements with white background mask the rest of the image.

<div>
  <img src="http://example.com/img.png"/>
  <div id="masking-circle"></div>
  <div id="mask-top"></div>
  <div id="mask-bottom"></div>
  <div id="mask-left"></div>
  <div id="mask-right"></div>
</div>

It's a game of z-index values http://www.w3schools.com/cssref/pr_pos_z-index.asp and a mousemove listener