Hover and Fade Events

Events allow you to set custom triggers to change image objects or fade an object in or out on hover over, hover off, or click!

HubSpot Video

 

Resources:

Explore our Ad Gallery for examples of this feature

 

In this article, you will learn:

How to add an Event to an image asset

How to Configure the Event settings

How to set Hover Events on images

How to set Fade Events on images

 

How to add an Event to an image asset

  1. Choose the ad format and dimensions of the ad unit you wish to add the event to.  For guidance on building specific formats, check out this article.
  2. Open your ad unit within the builder, and ensure that you have uploaded all assets for your ad unit.
    * Note - You will need separate image files if changing from one image to another image.
  3. Once your assets have been uploaded to your canvas, select the layer you would like to add an event to.
  4. Within the right side dynamic properties panel, navigate to the "Events" section, and click "Add Event":

    KB-Hover-Fade-Events
  5. You'll then see the option to choose the event type, action type, and the delay, if applicable (in milliseconds):


KB-Hover-Fade-Events-menu


How to Configure the Event settings

The configuration options for adding events are explained below:

Type Select the type of 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 The speed (in milliseconds) of the action transition - set to 0 for no delay.

 

How to set Hover Events on images

  1. In the example below, we'll be adding a hover state to an image so that the image changes from cookie dough to baked cookies on hover over! 
    (see video example at the top of the page)
  2. Prepare your assets.
    * Note - You will need separate image files if changing from one image to another image.
  3. For this example, we'll be using two images: 
    "cookies-before.png", and "cookies-after.png".
  4. Click on the Asset icon and select or upload all images for your unit.
  5. Prepare your unit and organize all other assets on your canvas.
  6. Add the "before" image to your canvas:

    KB-Hover-Fade-Events-Cookie-Canvas
    * Note - We'll be adding the hover event to the center image of the cookie dough on the baking sheet (i.e. "cookies-before.png").
  7. With your asset selected, you'll see the Event Properties displayed in the Properties panel on bottom right side of the builder:

    KB-Hover-Fade-Events-1
  8. Click “Add Event” and you can now configure your first event (Event 1):

    KB-Hover-Fade-Events-Configure
  9. For Type, select "Hover Over", and for Action, select "Change Image":

    KB-Hover-Fade-Events-Hover-Over-Image
  10. For "Change Image" event actions, an 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. “cookies-after.png”):

    KB-Hover-Fade-Events-Hover-Over-Image-Upload
  11. By default, the delay is set to 500ms. We've changed the Delay to 0ms for this example, as we want the image to change instantly:

    KB-Hover-Fade-Events-Delay
  12. Now we'll add a second Event, to set an image on Hover Off - which will return the image back to the default state on hover off (i.e. "cookies-before.png").
  13. Click "Add Event" below your Event 1:

    KB-Hover-Fade-Events-Add-Event-2
  14. You'll see Event 2 has been added under your first event:

    KB-Hover-Fade-Events-Hover-Off-Image2
  15. Now for Event 2, we will choose "Hover Off" for event Type, "Change Image" for the Action, and insert the original image (i.e. "cookies-before.png") into the Image Source field:

    KB-Hover-Fade-Events-Both-Events
  16. We've also set the delay on Event 2 to 0ms, to match the Event 1 delay.

    KB-Hover-Fade-Events-Delay
  17. Save, and click the Preview icon KB-Animations-Eyeball to view your ad.
  18. Check out the finished unit within our Ad Formats Gallery: Hover to Bake Cookies

 

How to set Fade Events on images

  1. In the example below, we'll be adding a Fade Event to an image asset. The image will fade in on hover over, and fade out on hover off.
  2. Add and upload all assets to your canvas.
  3. Select the image you'd like to add the fade event to, and you'll see the Event Properties displayed in the Properties panel on bottom right side of the builder:

    KB-Hover-Fade-Events-1
  4. Click “Add Event”.
  5. For the event Type, select "Hover Over", and for the Action select "Fade In".
  6. Set your delay (animation transition time) in milliseconds. Set to 0 for no delay.

    KB-Hover-Fade-Events-Fade-In

  7. Now we'll add a second Event, so the image fades out on Hover Off.
  8. Click "Add Event" below your Event 1:

    KB-Hover-Fade-Events-Add-Event-2

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

    KB-Hover-Fade-Events-Both-Events-Fade-Out-Configure

  10. Now for Event 2, we will choose "Hover Off" for event Type, "Fade Out" for the Action.

    KB-Hover-Fade-Events-Both-Events-Fade-InOut

  11. Save, and click the Preview icon KB-Animations-Eyeball to view your ad.