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.
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:
How the Oreo Tweet could have been enhanced with this technique (animated GIF):
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.
「見えないものを見ようとして望遠鏡を覗き込んだ」 クリックで見えないものが見えたらRT ※閲覧はTwitter公式推奨 pic.twitter.com/8PCVR9UeTP
— [email protected] (@taki_bump) September 3, 2013