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:

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

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.

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

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.

5. Click "Save" then click "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!