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

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

Step 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.

Step 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

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! Your comment has been submitted for approval.

Was this article helpful?
Thank you for your feedback!