Whenever you have an element that has a hover state applied to it, you also have the ability to control the speed of that transition from the default to the hover state. I’ll select this image to show you how that works, let’s scroll down a little bit and I’ll select it again and then select the overlay hover state is always indicated by this little tag on the left within the Color picker. Whenever you see that you know you have that option to apply a hover, this one up here in blue shows you it’s currently in the default, the normal state and when I select hover you will see it turns blue shows you now. The hover panel is active. I’ll apply this purple and then I’ll reduce the opacity.

So we can see the background, and now, if I click outside again it goes to the default hovering over the image. You can see that hover state applied now hover is really important when you want to show people that often something can be interacted with like a link. So in this case, if I had this image on hover, I would probably add a link as well, but for this demonstration I want to show you how you can control the speed from this state to this state. You can see it takes a while to get there. What, if you wanted to happen slower or quicker, like very abruptly select the image go to settings and then styling or you can use the shortcut key control command M then from the styling sidebar on the right.

Go to advanced, and here you will see hover transition. This is where you’re going to control the speed. Currently, it’s set to half a second I’m going to lock this bar to show you the differences between going all the way to the left, where it’s at zero. Now, if I hover over this image, you can see it is very sharply done, select it again, and this done, let’s go to advanced, drag it all the way to the right, which gives you a full second of transition. It happens much slower.

This is available wherever you have a hover state and in most cases, you’re probably going to use this with a button. So I have this read more button here. If I select the read more button and we go to advanced, you will see it’s set to that standard of half a second. If I want it quicker I’ll, just drag it down a little bit and you see a much more abrupt transition from the default to the hover for more videos on updates, new releases and upcoming features for Brizy make sure you subscribe.