How You Make Those Clever “Click to Reveal” Images on Twitter
Over the last few weeks you may have noticed a baffling style of image on Twitter. Inline, the image will look one way, but once you click on it, it expands to a seemingly completely different image. The applications of this are pretty cool, especially for things like quizzes. Here’s an example from GE:
It’s not, as I first thought, multiple images. So how is this happening and how do you create them yourself? Well it comes down to two things: PNG images, and the background color of Twitter’s image container.
Quick Review of PNG Images
If you’re not a designer, you probably don’t have to deal with file types too often. All you really need to know is that when it comes to images, there are two main filetypes: JPEGs and PNGs. What’s the difference? Not much, except for the fact that PNGs can have transparency.
When you save an image as a JPEG, all transparent parts of that image are rendered as white, so your image is one solid block. With PNGs, transparent areas remain transparent so you can see through to what’s below.
Anything left transparent remains transparent in the final image. It works the same as a photo negative or those old school overhead sheets from high school.This transparency is the key to what makes these images work the way they do. The other ingredient is Twitter’s image container background colors.
Twitter’s Background Color
You probably never noticed this, but the container that holds your image on Twitter has a different background color when you view the image inline and when you click on the image and have it pop out.
The background color inline is white, preview is black.
So what happens if we take the Grumpy Cat PNG from above, and share it on Twitter?
Boom! Now we’re getting places. The image displays fine on the white inline background, but the black blends into the black of the preview background. Here’s another look at what’s happening:
Make sense? We’re using the same image, but for inline it will pick up anything that’s black and when it’s in preview, it will pick up anything that’s white.
The Guiding Rule:
Anything you want displayed inline, make it black. Anything you want displayed in preview, make it white.
PNGs in Action
This may seem like a small little quirk of Twitter, but with some creativity, it can inspire some really creative ideas. Here are just a few:
The basic Black and White images are just the start of what you’re capable of producing. I know I’m going to try a lot of different things with this technique on the Salesforce Twitter handle, so stay tuned for that.
There is obviously more complexity in some of these images and I’m happy to dive into more detail if anyone wants. Just comment with the post you want to learn more about and I’ll do my best to drop some knowledge!
About the author: Matt Wesson is the Content Marketing Manager at Salesforce. Follow him for more interesting stories about content, marketing, and design.
