Hover effects are effects that apply to elements when the user's mouse is directly over them. They are a great way to add life to your site and intrigue your visitors.
In RapidUI you can easily add styling hover effects to your site's elements with these simple steps:
- Mark the element you wish to add hover styling to
- Head to the styling section
- Choose the 'Hover on element' and click 'Show more' to add styles
- Add the desired styling effects to apply when hovered
Now you're in the Hover Styling Panel. Any styling changes created using this panel will Apply ONLY when Hovering over the element.
The transitions panel allows you to control the gradation and animation speed when the hover takes place.
If you don't want the hover to effect instantly, you can easily make it happen gradually.
How to add transitions in hover:
- Mark an element to add transition effect
- Head to the styling Section
- Pick the element's styles and click 'Show more' (Not the Hover styles)
- Head to the effects panel
- Click the transition settings button
Then, click 'Add Transition', and pick the transition property, duration, easing, and set a delay if you want.