19 Aug 2019
Rollover Images in Emails: 23 Awesome Examples

Interactive content is an element of email campaigns that requires the participants' active engagement, be it cursor hovering, or a CTA click.

Though interactive elements gain more and more popularity every year, email clients don’t rush to fill in this niche — most interactive features are still supported in the browser only. Marketers, on the other hand, try to make the most of the dynamic content, offering subscribers to click on a web link incorporated in the email. But is it worth bothering anyway?

Rollover Ideas for Your Campaigns

  • Interactive product cards;
  • Hidden text blocks;
  • Intriguing banners;
  • Eye-catching CTA buttons;
  • Dynamic collages;
  • Creative elements;
  • How to add a rollover image to your email;
  • How rollover elements work on mobile devices.

If you want to surprise your customers in a good way, use only those elements that will certainly be displayed correctly in their emails, regardless of the email client. One of those is a rollover - an effect that changes the image appearance based on the location of the user's mouse pointer. It is supported by almost all email clients.

How a rollover effect looks like

Here are some ideas on how to employ interactive images in your campaigns.

Rollover Images in Product Cards

Online shopping sites have long been equipping their products with numerous photos, video reviews, and animations. In an email, however, two pictures are quite enough to show the item from different angles or on a model.

Rollover effect in product cards

1. Focus on one product item on the list.

Rollover images often have no functionality - they only serve as eye-catching elements to attract the customer’s attention and keep it for a bit of time. It’s a good choice when you want to single out a particular product in the line.

Rollover effect in product recommendations

In this example, the hover is applied to the New Arrivals category. The customer only notices it if they hover over this block in the email.

2. Show how the product looks like on a real person.

Items looking great in the catalog may not look as fantastic after you put them on, resulting in numerous Expectation vs. Reality memes. Photos that show the digital product being put into action can help make the right choice.

Rollover effect example

This jewelry shop has got it covered. You can estimate the real size of the jewelry by seeing how different pieces fit real people. This is particularly important for rings where each millimeter in diameter can affect how the item may look on your finger.

3. Show the item from different angles.

Physical stores offer more secure shopping experience because customers can hold the item and look it over at every angle. You can use a rollover image to provide digital products with the same visual exposure.

Rollover effect from different angles

For clothing retailers, it’d be smart to show the item front and back.

4. Let people take a closer look.

Speaking of online clothing retailers, the item material is another important factor when it comes to making a purchase. Do offer a close-up for the customer to evaluate the material, design, stitching, brand name, or any other important detail.

Rollover effect: different usage

In their campaign, Proskater offers parkas with three different pocket types, which can be really important for cold winters.

5. Show the range.

Save space by demonstrating available sizes and colors rather than describing them with voluminous texts. Offer your subscribers to click on the web link and explore for more by demonstrating the best products from the range.

Rollover effect: show the range

Rollover Effect in Text Blocks

In an email campaign, not only images are able to catch the attention; text can also do the trick. The only technical requirement is to put it on the image, the rest of the process is the same.

6. Keep the price for afters.

Any product card has to include the price. But rules are made to be broken, right? Don’t scare the customer off with a price right off the bat, keep this information for those who are actually interested in the product.

Rollover effect in text blocks

It’s similar to walking around the store — you need to come closer to the product that has caught your eye to see the price tag.

7. Provide Detailed Information.

An interesting campaign example by Freshinbox: a user can hover over the movie poster, and the image switches to the movie info:

  • User ratings;
  • Duration;
  • Movie-friendly devices.

Rollover effect shows details

Here’s another option — a picture can hide a long text description usually included in a product card.

Rollover effect hides information

8. Upgrade Your Blog Posts.

If your newsletters are filled with blog posts, reviews, and digests, spice up the title images, headlines, and call-to-action buttons.

Rollover effect in blog posts

9. Show Functionality.

Today, few people are ready to spend their time to read a lengthy text about product features and characteristics. Besides, this text can take up quite a lot of precious space in the email. Instead of describing the functionality, it might be better to demonstrate it via a couple of images. As they say, a picture is worth a thousand words.

Rollover effect describes products

A hummer tool set isn’t easy to describe in a few words, and so ThinkGeek opted for a better solution a single dynamic image helped them present the set in the best way.

Rollover Banners

A banner is one of the major elements of any email, and it’s hard to imagine a campaign without one. Try to liven them up a bit.

10. Combine Banners.

Announce your grand campaigns with several changing pictures. By hovering over the banner, a customer will see a bit more information on what to look for on the website.

Rollover banner

Note that images are designed in the same color and style. Thanks to this, the switching looks natural.

11. Keep the suspense going.

Running a campaign for subscribers? Don’t show all your cards right away. Hide some element, for example, a banner with discount conditions.

Rollover effect for banners

12. Employ some animation.

A rollover element generally means switching between two static images, but you can add some life to it by using animation.

Rollover effect with animation

A rollover element can also be a solution to the following problems with GIFs:

  • A GIF is displayed without background, and the customer sees the images in the wrong order.
  • A GIF isn’t looped and ends by the time customer reaches it.
  • It’s close to other animated elements.

Now it’s the customer who decides when GIF animation starts.

Eye-Catching Rollover CTA Buttons

CTA buttons are necessary to entice a customer to take certain actions: click on a link, buy a product, watch a video, etc. However, everyone’s so tired of traditional buttons, that some companies reduce their number in emails or even leave only text CTAs. So what is the right balance?

13. Hide CTAs.

One option is to hide buttons in product cards using a rollover element.

Rollover effect for CTA

This way, customers see the button only if they hover over the product they’re interested in, and your emails aren’t stuffed with unnecessary elements.

14. Enhance CTA buttons.

Every marketer knows that the best practice is to place a CTA where it will jump into the reader’s eyes. This way, a customer won’t need to look for hints as to what you want from them. But what if your call to action is not only worded nicely but has an appealing design as well?

Rollover effect for CTA buttons

This button is perfectly designed to push you to click and pass through a couple of Super Mario levels, isn’t it?

15. Add several buttons.

They can be basically the same in shape and design, but when a customer hovers over them — magic happens!

Rollover effect for several CTA buttons

Keep in mind that buttons with a rollover effect are technically still images. You won’t have to adjust the layout, but it’s important to think what alt-text or button will be displayed instead of disabled images.

Create Collages

Things like unusual element layout, unique product cards, or asymmetrical blocks make emails unforgettable. Lately, email campaigns have been making use of collages quite a lot. But even well-combined pictures can still be enhanced.

16. Diversify your collages.

If you’re making a single picture collage, liven it up by adding a blending effect when the cursor is over it.

Rollover effect for collages

17. Make every element interactive.

If you’re using an editor, and each picture in a collage hides a separate link, there’s another way to go about adding interactiveness. You can do it for each element, separately. Look how Virtus did it.

Rollover effect for dynamic elements

When hovered over, each photo gets colored, and you can click on it to go to a specific product page.

18. Use several rollover elements.

Same as in the previous example, you can use a number of interactive elements together. Sure, it will take some effort to create such blocks, but the result looks awesome:

Several rollover elements

This particular example required some coding, but it is worth bothering. In contrast to traditional GIFs, which would look gaudy in this case, a rollover effect allows the customer to check out the size chart in a convenient way, without any blinking and distracting elements.

Use a Rollover Effect With Any Email Element

Use your imagination to make your email campaigns come alive. After all, every image you use in your emails can be enhanced with a rollover effect.

19. Push users to watch a video.

Remember the trend of using GIFs to attract users’ attention to a video block? Now you can use animation and experiment with perspective.

Rollover effect for a video

In the email by Disney, the image gets a little closer when hovered over. Such effect is easy to achieve straight during email creation — simply crop the image and resize it to fit the block. You can do that in the built-in image editor.

20. Collect reviews.

If asking for feedback in a separate block in the campaign instead of sending one more email, make this block more expressive.

Rollover effect for review collection

Smile or wink at those customers who wish to praise you, and show how sad you are to see a negative review.

21. Tell what’s behind the QR code.

QR codes are often seen in emails next to mobile app buttons. But detailed information about the benefits of apps is usually only provided via special campaigns dedicated to the app.

Rollover effect behind the QR code

Provide a little more information with a rollover element to inspire subscribers to scan the code and install your app.

22. Play with your customers.

A rollover effect can bring up some playful vibes into your campaigns:

  • Add to emails a trivia game;
  • Add a quiz with hidden answers;
  • Insert a riddle, etc.

Rollover effect in a promo campaign

The answer will be provided straight under the question, the customers will just need to hover over to see it.

23. Make social network buttons cuter.

Even if being the smallest block that occupies little space in the footer, social media buttons can still be interesting. Of course, a rollover on such tiny icons can only be found by chance. But that’s the trick!

Rollover effect for icons

If the customer reads an email to the end, the cursor highlights a button, and creates that “wow effect” everyone’s looking for in emails! It’s hard to just leave such a block unnoticed — many would want to check out all the icons at least, and click on them at best.

How can you add a rollover effect to an email using eSputnik?

It’s not a problem to find on the Internet how to add a rollover using the code. We’ve tested this method and faced a lot of display-related issues some emails may look differently in different email clients.

eSputnik’s users can add rollover elements to their emails right inside the editor, no tinkering with the code needed.

Rollover effect in the eSputnik system

This means that you can enable the rollover effect when working with any image, given that you follow several simple rules:

  • A rollover effect is only used with images. Text blocks, buttons, and other elements will have to be turned into images. Otherwise, you’ll need to add other styles using CSS.
  • You can only switch between two images: the main one and the one that’ll be shown when hovered over.
  • Mind the size. The second image size must correlate with the size of the first one. Otherwise, the whole layout can be distorted when the image is hovered over.
  • Add the link. There should be a single link for both images.
  • Set the alternative text once in the corresponding field; it’ll be automatically added to both pictures.

Rollover effect in the eSputnik system: HTML code

Keep in mind that this feature is supported by a limited number of email clients: Gmail, Yahoo! Mail, AOL, iCloud Mail, Outlook 2003, and MacOS Apple Mail. If the email client doesn’t support such interactivity, you’ll get a static block that doesn’t change upon cursor hovering.

What About Mobile Devices?

The display of a rollover effeсt on mobile devices but not quite the same way one might expect:

  • Provided with a link, the rollover element is activated too quickly, sending the user to the landing page.

Rollover effect on mobile devices

  • With no attached link, a click on the picture opens the second image.

You can use separate blocks for desktop and mobile versions.

For smartphones, you can set up a block that will change upon tapping:

Rollover effect: mobile version

And under that block, you can add a CTA button with a link to the website. If a customer opens this email on a desktop client, the picture will change when being hovered over.

In our editor, you can turn off an unlimited number of blocks you don’t want to show on certain devices. A handy feature, isn’t it? You can find it in the block settings:

Rollover effect: view on mobile

“No” is set by default, meaning blocks aren’t hidden. A click on the desktop icon or mobile icon will hide the blocks for PCs or smartphones correspondingly. Maybe you have your own ideas or secrets for using this kind of interactivity in emails? Share them in the comments!

Stay tuned, and see you again on our blog! :)

Learn how to design dynamic emails!

Was This Post Helpful?

  • 1
  • 2
  • 3
  • 4
  • 5
Total votes: 3 average: 5 (Rating: 100%)

Related posts