CODEWITHSUNDEEP
jqueryhtmlcss
Northernlights
Northernlights

Reputation: 109

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

The top example specifically:

http://jsbin.com/ococal/3

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

Upvotes: 1

Views: 118

Answers (3)

Litek
Litek

Reputation: 4888

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.

Upvotes: 3

Shedokan
Shedokan

Reputation: 1202

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>

Upvotes: 0

nurnachman
nurnachman

Reputation: 4565

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

Upvotes: -2

Related Questions