in Social Media

Twitter Hack: Using “Rollover” Images for Marketing

I recently encountered a viral image created by Japanese Twitter user, @taki_bump. The image, when viewed inline within the Twitter stream, shows a white background with the image of man looking into a telescope. Upon clicking to view the full image, the background changes revealing a starry sky into which the man is gazing. I thought it was really cool, but couldn’t help but think about how this technique could be extended beyond art and used for marketing purposes.

[OptinLink id=1]Get the Photoshop Template I Used to Create my Rollover![/OptinLink]

Before Click:
before image click

After Click:
after image click

This technique works by using a transparent PNG image with two different colors in the image. One is dark grey (#333333) black (#000000) that Twitter uses for its lightbox popup and the other is white (#ffffff) which is used for the inline image background. You may also choose to play with the hover color (#e8e8e8).

This can be used to increase click through rate organically in Twitter, or in conjunction with the ads platform, to display a call to action that then reveals another image upon clicking.

For example, I attempted to re-create 360i’s award winning Tweet for Oreo during the Super Bowl blackout: oreo dunk in the dark tweet

How the Oreo Tweet could have been enhanced with this technique (animated GIF):
new oreo dunk in the dark Check out my version live on Twitter (and the improved version here).

[OptinLink id=1]Download the template I use for the above example.[/OptinLink]

The possibilities are now open. Go forth into the world and make some rollover images to promote your brand.

UPDATE: KRoy Williams has notified me that the original method works once again, even with the current Twitter redesign. Check out his awesome write-up over at My Anatomy Art. It covers the technique in greater depth.

Write a Comment