How to Add a Rollover Effect to an Email

Rollover Images are images that change when hovered over with a cursor. They are used for a better product showcase, and make email content interactive.

Previously, rollover effect creation required multiple tools and coding skills. However, in the eSputnik system you now can create rollover images in a few clicks, without technical expertise required.

How to Create a Rollover Image

1. Choose two images in PNG or JPG format. The aspect ratio of both images should be identical.

Images for a rollover effect

2. One of the images will be displayed as the main one, and another will appear when being hovered over.

Note! If the aspect ratio of the images differs, the email layout may be broken.

3. Add to the template an empty structure, click Image and upload the main image via any method.

Empty structure

4. Enable Roller effect.

Roller effect

5. Upload the second image.

Second image

6. Note that the link to the image and the alternative text are set only once, after uploading the second picture.

Link and alternative text

7. To preview the ready rollover image, click Message view.

Message preview

Things to Keep in Mind

Note these peculiarities when adding a rollover image to email campaigns:

  1. This feature is available for limited email clients: Gmail, iCloud Mail, Outlook 2003, Apple Mail, Yahoo! Mail, Ukr.net, AOL.
  2. A rollover effect works only on desktop where it’s possible to hover over images. Touchscreen devices don’t support this feature: they display one picture a click on which would forward you to the website.
  3. By far, no email testing tool (Litmus, Email on Acid) offers interactive message testing. To see how your campaign looks like on a variety of devices, send tests to all the available email clients and devices.
  4. Currently, this feature is available for images only. The rollover effect for CTA and other elements isn’t supported.

Rollover Effect Examples

Interactive images can be used in any campaigns, making your emails more attractive and engaging. Let’s take a look at several examples.

Clothing, Shoes, and Accessories - Different Color, Different Angles

A great way to promote the product is by demonstrating it from different angles:

  • show texture and color;

Fabric texture

  • display different angles;

Different angles

Renting - Accommodation Interior, Multi-Views

Show as many advantages of the place, avoiding voluminous text.

Multi-views

Furniture - Wide Product Range

Demonstrate different colors, patterns, and material options.

Product range

Dynamic Banners

Add interactive vibes and impress your subscribers with a new design.

Dynamic banner

The use of interactive images is limited only by your imagination. The proper application of the rollover effect can help increase the number of conversions and click-through rates, and boost sales.