The 12 Bulletproof Ideas to Include Image Rollover Effect in Emails
I am glad to announce that the other day Stripo email editor released its new option “Image Rollover” to diversify and enliven your email templates.
Implement this feature with our editor just in one click!
The great news is that our image rollover effect works even in Gmail!
Read more details regarding exporting emails with image rollover effect to email clients and ESPs below the “ideas”.
This feature is also known as a mouseover. How does it work? When you place a mouse cursor over an image, it is being replaced with another one.
This is not a brand new effect for websites. But as for interactivity in emails, it is only expanding its positions and conquering the market because of email clients’ capability.
Before going deep into technical characteristics, I just want to present our compilation of the 12 best image rollover ideas to implement in future email marketing campaigns.
The 12 ideas to include image rollover effect in emails
As long as this is sort of a new feature to email marketing, there are not many examples of such emails on the web. Which is why I decided to create some of them on my own with the help of our template builder.
1. Showing the backside of a product item
When the back of the clothing is worth seeing, it is worth being shown.
Tip: make sure to use images of similar size. In case, they do differ, you may crop or resize one of them in our photo editor to make it fit the smaller one.
2. Showing color variety
Sometimes when presenting a wide range of product items, it is impossible to demonstrate all the colors we have in our arsenal. Otherwise, our emails would be very long. The solution is to apply an image rollover effect.
Tip: For this purpose, you better use the same image with the same body position. In this photo, you can notice even the same wrinkles on the blouse. Or ask your designer to change clothing colors.
3. Displaying the ways to wear some clothing
If any piece of clothing can we be worn in two ways, then why not show it with an image rollover instead of using GIFs?
Tip: For this particular purpose, use photos of a model taking various positions to better introduce the piece of clothing and to create a sense of variety.
4. Showing a close-up or more details regarding product items
Difficult to describe fabric structure — show it to the recipients.
You produce furniture or tea sets. Knowing that quality is your strong point, you realize how important it is to mention it to your subscribers. Or customers are hesitating whether to buy a dress from your online store or not, and with a close-up, you prove him/her how neatly the seams are. Display what kind of fabric you used for your furniture items.
Tip: No restrictions here. Just use photos that demonstrate your advantages best.
5. Demonstrating the price and brief description
You tend to keep your emails short, and not overload them — rollover image is a good way out.
Tip: To implement this, you will need to fill out all the lines like price, brief description, and a name of the products’ section separately. Then make a screenshot of it. And upload as the second image of the rollover.
This simple trick saves you lots of room in an HTML email template.
6. Hiding CTA-button
CTA buttons are crucial for all emails. In fact, CTA buttons are beautifully wrapped links. And links navigate our subscribers and help them get to our website fast.
But I personally prefer friendly newsletters, where I am not told or even forced to buy something. I, like many customers, prefer making my own decisions. Thus, all bright “screaming” buttons may ruin our impression about your email and not bring you desired results.
But it concerns only those products which are not likely to be purchased very often, like trips, cars, apartments.
When I am given the time to think this purchase over and the button is sort of “hidden”, I am more likely to buy.
Note: This won’t really work for online clothing stores.
Implement this trick when you need to save some room in your emails, as well.
Tip: Create the button image prior to “hiding” it behind the image. On the photo two, we placed the button over the image while on the image three, the button is pretty much independent. Which button position do you like more?
Note: As long as this feature works on desktop devices only, those customers who open emails on mobiles, may not even see there is supposed to be a button. Make sure to add one below the entire block. Or send customers via the button to the website page where you describe all the details for the trips.
7. Drawing attention to CTA button
We just said that CTA buttons do not complement some promo emails but are a must for sales. That is true. Especially, when it’s about clothing or sports shops.
Certainly, button image rollover will not impact conversion, but is about to entertain your customers. And as we know, the more they love our emails, the more they will anticipate our future newsletters, the more clicks or maybe even orders we are about to get.
Tip: Button images are supposed to have exactly the same size, the same font. Probably, it is easy to draw/create one, save it and then just change its color. Then save the button once again. This way you are about to provide subscribers with seamless rollover effect.
8. Drawing attention to the value proposition
You want to inform subscribers about upcoming sales or to make sure that your value proposition will be noticed? Rollover will do.
Tip: Implementing this idea will require designer’s help to make both images coincide in color and sizes.
9. Providing GIFs
GIFs are a great way to better present our products. Be it a bike riding across the forest, or a sprinter wearing our sneakers at the competition. But in newsletters, we normally promote a few items.
Yet, we know that only one GIF or any other kind of action for a screen is allowed. When a person sees two moving elements, he or she may get irritated. For some people, it may lead to even more severe consequences. We do not want our valued subscribers to have health problems.
Thus, putting GIFs behind the images is worth our attention.
Tip: If you please, you may even explain to your customers what is this animated GIF for.
10. Playing games
Find traditional promo a bit boring? Let’s engage recipients with some games.
Not only provide you them with a gift, but also make them “fight” for it. For example, offer them free broadcasting of a super series match. Previously in email inform subscribers, they have to find it.
Tip: To implement this, you need to slice your image into several pieces. And each of them must have a rollover effect on. Make sure to remove all indents and paddings between the images in a container. Don’t forget to insert a link to the proper image.
11. Running quizzes
Hubspot “runs” quizzes in its emails. It slices an image into four pieces. Each piece has an alternative one. They all look similar. But the only one says “Correct”.
Tip: To implement this kind of a quiz, not only have you to slice the image into pieces, but apply background color for each one separately. No links required here.
Note: Be sure to insert alt text for all images, otherwise some of the recipients may see only empty screens.
12. Sending out teasers
When preparing something huge for your customers, you certainly wish to let them know. Create teaser emails to remind about yourself and to make the people anticipate your following email.
Tip: Insert a link to the landing page on your website with more details regarding the “surprise”.
Tips for implementing image rollover
Apart from the tips we mentioned above, I’d love to add a few general ones which you need to stick to in order to make your rollover fulfill its mission.
Pick images of similar size, similar colors.
When displaying colors of pieces of clothing, make sure your model takes the same position. Or better ask your designer to change dress color for the existing image. It will look seamless.
Same concerns the cases when you choose to draw attention to some drinks. For example, a cup of coffee may be either empty, then full, or it may be steaming and not.
Same as with images: set identical indents and paddings. Even one-pixel additional padding may ruin customers’ impressions.
The only way to test whether this effect works on customers devices is sending it to as many email clients and as many devices as possible. As none of the email testing tools is ready yet to fulfill it.
The good news here is that with Stripo, you can send from 5 up to 300 test emails a day to various email addresses (the quantity depends on the pricing plan).
The way it used to work
You had to search for a website that builds image rollovers. Insert your images, let the site generate an embed code, then you copy the code and insert it into email template HTML code. Certainly, in case your editor offered open HTML code or at least basic HTML-code-block.
Most editors still suggest that you take all these steps to add image rollover effect in your emails.
Gmail and Outlook did not support this kind of interactivity.
The way it works now
Or how to implement an image rollover effect with Stripo:
- upload your photo to the editor;
- then click the “rollover effect” button;
- then you will need to upload the secondary image;
- add proper links;
- give alt names to the images. Otherwise, Gmail might now show the images in email and suggest that customers click the “Display the images below”.
In this case, image rollover will not work in any email client!
In 5 easy steps, we created the following image rollover example with the “steaming cup”:
Image Rollover Effect and Smart-elements
Rollover effect works for smart-elements, as well.
After making all the settings and inserting proper links, all you have to do to turn rollover effect for smart-elements is — click the image right in the template, to the left you will see “rollover effect” button. Switch it on, upload the secondary image. Done!
Note: Image Rollover effect was developed precisely for desktop devices, as it is possible to place a mouse over any image. While on mobile devices, any touching or tapping the screen will be considered a click. Consequently, recipients will be taken to the landing page according to the link you had set.
How to export emails with image rollover effect and the way it works in ESPs
Create email, turn on the image rollover effect, test it and then click the “Export” button and export it to the ESP you use.
Then choose the ESP you use:
Done! The email template with an image rollover effect is ready to be sent to your valued customers and subscribers.
Now, this feature works in all ESPs we have integration with.
Image rollover effect and email clients
Test emails with image rollover effects or emails sent from any ESP will work in Gmail.
But, when forwarding emails with interactive elements or exporting them from Stripo to Gmail account, those latter lose their interactive properties, unfortunately.
This means you cannot export interactive emails from Stripo to Gmail and send them out to other recipients no matter what email client they use.
Outlook did not perform my image rollover well. Yet, it did show the primary image.
Summary: It works in almost all famous email clients but Outlook.
I sincerely hope that this new feature effortlessly added in responsive email templates will bring you more conversions. May it increase your CTOR, improve customer loyalty and take your emails to a totally new level.
If you have other ideas, please share them with us on Facebook mail us at firstname.lastname@example.org — we will really appreciate it. And if you let us, we will share your ideas with others here on our blog.