Enabling a hover action on the different elements in your site is a great way to add some fun and colorful interactivity and also emphasize clickable objects.
Setting a Hover Action
There are a variety of settings that can be adjusted under the Hover tab in Showit that will allow you to add eye catching movement and interactivity to the elements in your site.
Below are a few of the different settings for creating unique custom hover actions.
Type
The type setting on a hover action for an element will allow you to choose what kind of hover action you would like to set on the element. In this drop down you can choose between the following:
Canvas Default
Page Default
None
Custom
Setting the hover type to None will ensure there is no hover action on this element. You will need to set it to Custom in order to assign a unique hover action to this element.
Alternatively you can choose either Page or Canvas Default. This will automatically apply the default hover action that you have set for the page or canvas that this element is located on.
Note: You can set the page and canvas defaults for hover actions by first clicking on the either the page name or canvas name respectively, and then clicking on the Hover tab in the right side properties panel.
There you will see an option to set Hover action for the page or canvas. Click on the drop down and choose custom. Then set the page or canvas default.
Setting the Page Default Hover Action:
Setting the Canvas Default Hover Action:
Opacity and Color
Setting the hover opacity for an element will allow that element's opacity to change as your cursor hovers over it. You can set this on a scale of 0 to 100, with 0 being invisible and 100 being completely solid.
Changing the color here will allow the element to change color whenever your cursor hovers over the element.
Time
The time setting indicates the period of time in which the hover action will occur. This is typically very quick, ranging from 0-2 seconds, but you can set it with the time that works best for your element.
Element Specific Settings
Some elements will have different options available under the hover action settings.
For example, a text box will have the most options available for hover action settings like font, size, letter spacing and underline.
Other elements like a shape will have options like changing the border size and color on hover.
Note: If you're having difficulty getting your text size to adjust properly, try enlarging the text box and changing the text alignment settings.
Hover Actions for Images
Setting a hover action on an image allows for some fun interactivity for your site that will really help it to stand out. You can find some inspiration for setting hover actions on images in this article.