Mouse Hover Settings

Add Mouse-Over Styles/Animations to your Layers and set the Cursor Type for the Layer.

Table of Content

General Settings

1. Cursor
The default CSS cursor for the Layer.  Set this to “pointer” to give the Layer a “button/link” behavior on mouse-over.

3. Pointer Event
The CSS pointer-events property for the Layer.  Settings this option to “None” is useful when the Layer has other content behind it that are linked.

3. Animation
Enable this option if you would like your Layer to have hover styles/animations.
Only on Desktop – Enable hover styles/animations only on Desktop.

Hover Animation

Adds a CSS Transform to the Layer when the user hovers their mouse over the Layer.

1. Transition Time
The total time the transition will take place.  Set this to “0” if you don’t want the hover to be animated. 

2. Transition Easing
The easing equation used for the transition.

3. Hover zIndex
Dynamically change the Layer’s CSS z-index property.

4. Opacity
Adjust the transparency level for the Layer.

5/6. ScaleX/Y
Scale the Layer’s width and height.  Enter a number 0-1 where “1” is equal to equal 100%.

7/8. SkewX/Y
Apply a skew distortion to the Layer.

9/10. RotateX/Y
Apply 3D rotations to the Layer. 

11. 2D Rotation
Apply a 2D rotation to the Layer. 

12/13/14. OriginX/Y/Z
Optional CSS transform-origin points. 

16. Mask
Apply Masking to the Layer


Font & Background & Border Styles

1. Text Color
Change the Layer’s text color on mouse hover.

2. Text Decoration
Apply a CSS text-decoration such as “underline” to the Layer.

3. Background Color
Change the Layer’s background color on mouse hover.

4. Border Color
Set a color for the optional hover border.

5. Border Style
Set this to “solid” if you’d like to display a border for the Layer on mouse hover.

6. Border Size
The top/right/bottom/left sizes of the border.

7. Border Radius
Add an optional CSS border-radius to the Layer.


Filter Styles

1. Blur Filter
Apply a CSS blur-filter to the Layer on mouse hover.

2. Brightness Filter
Apply a CSS brightness-filter to the Layer on mouse hover.

3. Grayscale Filter
Apply a CSS grayscale-filter to the Layer on mouse hover, changing the Layer’s color to black & white.

Mouse Hover Settings

The Author

KC

Strength does not come from winning. Your struggles develop your strengths. When you go through hardships and decide not to surrender, that is strength.

Liked this Post?
Please Share it!