Adding a Rollover Effect

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 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.

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.

4. Enable Roller effect.

5. Upload the second image.

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

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

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;

• display different angles;

Renting - Accommodation Interior, Multi-Views

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

Furniture - Wide Product Range

Demonstrate different colors, patterns, and material options.

Dynamic Banners

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

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.