---
title: "Image rollover effect in email"
slug: "new-editor-image-rollover-effect-in-emails"
description: "Image rollover effect helps you entertain and engage customers. Moreover, it saves you precious space in emails, as you can hide product details behind its photo. "
tags: ["image rollover", "rollover effect"]
updated: 2026-01-13T08:32:09Z
published: 2026-01-13T08:32:09Z
canonical: "academy.insiderone.com/new-editor-image-rollover-effect-in-emails"
excludeFromExternalSearch: true
---

> ## Documentation Index
> Fetch the complete documentation index at: https://academy.insiderone.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Image rollover effect in email

Image rollover effect helps you entertain and engage customers. Moreover, it saves you precious space in emails, as you can hide product details behind its photo. You can also play games with recipients by making them “search” for the coupon, etc. You need to add image rollover effect to your emails for many reasons.

![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/Stripo-AtoZ-Manual-Rollover-Effect-to-Start-Games.gif)

Your title goes hereThe image rollover effect works on desktop devices. Other users will see the primary image only. It can be applied to any image you add in an email except for banners.Your title goes hereThe rollover feature works in a limited number of email services: Yahoo! Mail, Ukr.net, AOL, Gmail, iCloud Mail, Outlook 2003, MacOS Apple Mail.

After uploading your image, to activate this effect, toggle the **Rollover effect** button and upload the second image. Edit it if necessary.

![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/Screenshot%202023-12-14%20at%2010.05.17.png)

## Use case examples for image rollover

Below you can see some example use cases.

- **Show the backside of a product item**

Make sure to use images of similar size. If they do differ, you may crop or resize one of them in our photo editor to fit the smaller one.

- **Show color variety**

When you cannot demonstrate all product color options, you can apply an image rollover effect. For example, if you want to show the color options of a shirt, you should use the same image of the model with the same body position.

- **Display ways to wear some clothing**

For this particular purpose, use photos of a model taking various positions to introduce the clothing piece better and create a sense of variety.

- **Show a close-up or more details regarding product items**

You can show features that are difficult to describe. For example, with a close-up, you can show the fabric structure of a sofa.

- **Demonstrate the price and brief description**

To keep emails short and not overload them, you can organize lines like price, brief description, and product name, save this as an image, and upload it as the second image of the rollover.

- **Hide CTA-button**

You may want to hide CTA buttons for products that are not likely to be purchased often, like trips, cars, apartments. For such cases, you can create the button image before hiding it behind the image. In the second photo, you can place the button over the image; in the third photo, the button can be independent.

- **Draw attention to CTA button**

CTA buttons are a must for sales. Drawing attention to CTA buttons, you can entertain your customers, and they may love your emails more. To create a rollover for a CTA button, the button images must have exactly the same size and font.

- **Draw attention to the value proposition**

You can inform subscribers about upcoming sales to ensure your value proposition is noticed.

- **Provide GIFs**

GIFs are a great way to present your products better. You can put GIFs behind the images to draw users' attention.

- **Play games**

You can engage recipients with some games. For example, they can be offered free broadcasting of a super series match. To implement this, you need to slice your image into several pieces, each with a rollover effect. Make sure to remove all indents and padding between the images in a container. Don’t forget to insert a link to the proper image.

- **Send out teasers**

When preparing something huge for your customers, you certainly wish to let them know. Create teaser emails to remind users about yourself and to make them anticipate your following email.