Make a “Secret Message” with CSS Positioning and Transparency

Avatar of Chris Coyier
Chris Coyier on

Reader Brian left a comment recently with what I thought was a really cool idea:

I was thinking it might be neat to have a floating div with the random letters of half a secret message, with the other half of the letters in a background image or something so you’d have to scroll down to exactly the right point in order to reveal the full message.

Here is how I went about it. This technique uses just simple transparent images and CSS positioning.

Photoshop together your final message.
I included a little “scroll down” message so people would know what to do in my example.

Split apart the letters that will be “fixed” on the screen.
I used a simple layer mask to cover half the letters. Remember to turn off the white background layer and then export this a GIF or PNG so you get the transparency.

Here is what the layer mask looked like for mine.

Export the other letters.
Now you should be able to just reverse your layer mask (select it and press Command-I in Photoshop) and get the opposite letters separated. Again, turn off the background layer and export as a GIF or PNG.

Create the DIV’s in your HTML
There are probably a couple different ways to do this, this is just how I thought to do it at first. You could probably give unique ID’s to straight up img elements and accomplish the same thing.

<div id="fixed-letters">

<div id="scroll-letters">

The fixed letters get fixed positioning, and the letters that scroll get relative positioning.
Here is the CSS:

#fixed-letters {
	position: fixed;
	top: 200px;
	left: 100px;
	background: url(images/fixed-letters.gif) white no-repeat;
	width: 500px;
	height: 125px;

#scroll-letters {
	position: relative;
	top: 1200px;
	left: 100px;
	background: url(images/scroll-letters.gif) top center no-repeat;
	width: 500px;
	height: 825px;

Here is what it does:


(Photoshop file included)