Adding The Rollover Effect

Rollover is an effect where an image changes when a user hovers over it. When the user moves the cursor away, the email shows the original image again.

In email campaigns, rollover adds interactivity and makes the message more engaging for recipients. You can use it:

• in promotional banners;

• in product cards to show an additional view;

• in buttons to add a hover highlight effect.

For example, when a user hovers over a product image, the email shows a different angle, a specific detail, or the same item in another color.

Creating a Rollover

1. Create a new email or open an existing one.
2. Add the Image block to the required position in the message.

Prepare two images in PNG, JPG, or GIF format:

• file size — up to 3 MB;
• maximum dimensions — 4000 × 4000 px.

🚧

Important

Both images must have the same aspect ratio. Otherwise, the email layout may shift when the user hovers over the image.

3. Click the Image block and upload the main image that will appear:

• when the user does not hover over it;
• in email clients that do not support rollover;
• on mobile devices.

4. In the block settings, enable the Rollover Effect toggle.

5. Upload the second image.

6. Add a Link and Alternate Text.

📘

Note

Set the Link and Alternate Text. The system applies them to both images.

This is how the finished email will appear in the email client:

Rollover Usage in Email Campaigns

1. Rollover is supported on desktop devices only in certain email clients, including: Yahoo! Mail, Ukr.net, AOL, Gmail, iCloud Mail, Outlook 2003, and macOS Apple Mail.
2. On mobile devices, behavior depends on the email client. Some services may emulate the hover effect after the first tap on the image.
3. Testing tools (Litmus, Email on Acid) do not fully support interactive effects. Send test emails to different email clients and verify the rendering manually.
4. The Rollover feature is available for:

• the Image block;
• the Button block (hover highlight effect).