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:
After 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:
How the Oreo Tweet could have been enhanced with this technique (animated GIF):
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
— TAKI@BUMP (@taki_bump) September 3, 2013