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.

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).

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


This site uses Akismet to reduce spam. Learn how your comment data is processed.