Adding an effect to an object when you hover over it

Hover.css offers a number of different animated effects that can be applied to the buttons on your PageCloud page. These can be used to help highlight a clickable feature in a enticing way or to help make a clickable object stand out more. 

This guide shows you how to create a basic mouseover/hover effect offered by Hover.CSS

Here is a demonstration:

Step 1: Follow the link below to download the hover.css file

Step 2: Find that file on your computer and unzip it, then drag the resulting hover.css file into your desired PageCloud Page while in edit mode.

Step 3: Pick a desired effect from the following page and copy the hvr-effectname text

Some of our favourites include hvr-grow and hvr-hang

Step 4: Select the object on your page you'd like to add the effect to (such as a button or image) and then go into the PROPERTIES tab. Paste the hvr-effectname you selected into the CLASS field.

Step 5: Save and view live to view your effect in action.

For a little added guidance, feel free to check out the gif below showing this process:


Thank you for your feedback!

Was this article helpful?
Thank you for your feedback!