With the Hover effect, you can change the state of the element, for example, add tips, make smooth transitions, transforms, rotations, zoom, shift, etc. that will be displayed when you mouse over the element.
Change the Background position
Select the previously created Box and go to the hover tab. Now you can change any CSS property that will be applied to the Box when hovering over it. To see how it works, let's change, for example, the Background-position and set the values: 100% 0%. Screenshot:
Go to Preview
To check how Hover works, go to the Preview mode by clicking on the "eye" icon in the upper left corner of the screen.
The Preview can also be opened by pressing
P. In this mode, if you mouse over the Box, you'll notice that this effect works correctly. In this mode, you can also see how the page will look to your visitors.
You can also set hover effects for other elements. Choose the Button primitive, go to the hover tab, set Background, and choose the color-orange
You can also check how this property works in the Preview mode.
The CSS property transition affects the transition state between the two states of the element (e.g. default and hover).
- property — specifies which style will be affected by the transition;
- duration — defines the animation time;
- timing-function — animation speed;
- delay — the waiting time before starting the transition.
Set the background Transition
This all sounds very complicated, but in reality it's not. As an example, let's set the following values of the Box where we changed the Hover.
For the default state.
Set the transition button
Set the same value for the button, but set the property to background-color. Now in the Preview mode, you can see that the transition between states is smoother.
Apart from the Hover state, there are others like Focus, Active, and Disabled. Let's have a look at them:
- The Focus state defines the style for the element that gets the focus.
- The Active state defines the style for the active link. The link becomes active when you click on it.
- The Disabled state is used to apply the style to locked form elements. These elements can't be the focus, be clicked, or be activated, and you can't type in the text fields.