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:
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.
— TAKI@BUMP (@taki_bump) September 3, 2013