Hover and Fade Events

This article will walk you through creating Events. Events allow you to set custom triggers change image objects or fade an object in or out on hover over, hover off, or click.

 

Setting Hover Events

You will need separate image files if changing from one image to another image.

In the example below we'll be adding a hover state to an image so that the color changes from black to pink on hover over.

2 image files:
"Shop Now Black.png" and "Shop Now Pink.png"

Click on the Asset icon  and select or upload your default image asset (Shop Now Black.png image asset selected below):



With the asset selected, you'll see Event Properties displayed in the Properties panel on the right at the bottom:

 

Click “Add Event”

 

You can now configure your first event:

  • Type - select the event trigger - Hover Over, Hover Off, or Click.
    • Hover Over - Triggers the event when the user hovers over the image
    • Hover Off - Triggers the event when the user hovers off the image
    • Click - Triggers the event when the user clicks on the image
  • Action - select the event action - Change Image, Fade In, or Fade Out
    • Change Image - changes the selected image asset to another image asset
    • Fade In - Fades the image from transparent to 100% opacity
    • Fade Out - Fades the image from 100% opacity to transparent
  • Delay - speed, in milliseconds, of the action transition - set to 0 for no delay

Example Event 1: Change Image on Hover Over



For Change Image event actions a Image Source field will display. Click into this field and select or upload the asset to display when the user hovers over the image (i.e. “Shop Now Pink.png”).

 

Now we will add a 2nd Event to set an image on hover off - back to the default state.

Click Add Event:

 

You'll see Event 2 has been added under your first event.


Now we will choose Hover Off for event type and select the original image (Shop Now Black.png):

 

 

Setting Fade Events

Select your event trigger - hover over, hover off or click.

Select your Fade Action - Fade in or Fade out

Set your delay, or animation transition time, in milliseconds. Set to 0 for no delay.

 

In the example below we've added a Fade event to an image asset. The image will fade in on hover over and fade out on hover off.

 

 

To preview your Events - Click the Preview  icon  to view your ad.