Stage one

Step 1

Place your image in a content gadget. Do not forget to position it correctly using margins and padding.

Step 2

Add a link to the picture. Do not forget to add a tooltip if you want this text to show on your image.

Step 3

Just look at the examples above if you have trouble placing your image.

Stage two

Step 1

While editing the gadget click the HTML icon in the content editor toolbar to switch to gadget HTML edit mode.

Step 2

In your gadget's HTML code - find tag <a>...</a> used to display your image.

Step 3

Add class="animatedPicture" to your 

<a> tag so it will look like: <a class="animatedPicture"...>

Step 4

Click save and exit edit mode

Stage three

Step 1

You will need this only if you want to change the hover color.

Step 2

By default, hover color is red. To change it, go to our CSS customization page and paste this code into the custom CSS section: 

body :not(pageModeEdit) a.animatedPicture:before{background-color: #ed3529;}

Step 3

Replace #ed3529 with desired color in hexadecimal format.