User Guide

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 to highlight fitness programs or yoga classes;
  • in images to demonstrate different exercises, yoga poses, or workout techniques;
  • in buttons to add a hover highlight effect.

For example, when a user hovers over an image, the email shows a different yoga pose, another stage of an exercise, or an alternative way to use fitness equipment.

Email preview with two workout images that switch to alternative poses on hover, shown on desktop and mobile

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.
Image block icon highlighted in the side panel and three empty image placeholders highlighted in the class cards

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.

  1. 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.
Image placeholder highlighted with the image gallery open showing the drag-and-drop and paste URL upload area
  1. In the block settings, enable the Rollover Effect toggle.
Image block settings with the Rollover Effect toggle highlighted
  1. Upload the second image.
Rollover Effect section with the uploaded second image highlighted and the list of supported email clients shown
  1. Add a Link and Alternate Text.
Image block settings with the Link and Alternate Text fields highlighted
šŸ“˜

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:

Finished email in the email client with the class images shown before hover

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

Updated 11 days ago

Did this page help you?