How To Create Rollover Images For Emails And Product Pages


Images that change to show a different one when your cursor is positioned over it are called Rollover Images. They are an awesome way to showcase products or make content more interactive for visitors. These images are widely used in marketing emails as well where perhaps they are less welcome. The images are created with CSS and HTML but if you’re looking for a simple UI based method to create them, FreshInbox’s Rollover tool is what you need.

Before you start, make sure you have the two images you want to include in the rollover image. Of the two images, one will appear when the cursor is not positioned over it, while the other will appear when the cursor moves to the image. Your images can be in both PNG or JPG format. Upload them to a cloud drive or image sharing service like Imgur and then head over to FreshInbox’s Rollover tool.

In the Primary Image URL, enter the URL of the image that should appear when the mouse cursor isn’t positioned over the image. Specify the width and height of the image, and in the Alternative Image URL, enter the URL of the image that will appear when the cursor is positioned over it.

FreshInbox's Rollover tool

Next, enter a redirect URL in the ‘Link’ box. If a user clicks on your rollover image, they will be taken to the URL you enter here. Enter ALT text and click ‘Generate. You will see a preview of the image on the right and get codes for adding the image to your website or email.

If you want the image to be responsive, enable the ‘Scale image to width of container’ option but do so only if you know how to work with containers. Leave the option unchecked for a normal rollover image. To insert it in an email or a web page, copy the code and paste it inside the tag it’s meant for i.e. Heading for email and Body for web page. That’s all it takes to make a rollover image.

Visit FreshInbox’s Rollover tool