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

https://siteassets.pagecloud.com/hovercss/download...

2. Find that hover.css.zip 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

https://hovercss.pagecloud.com

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!