Here we made simple demo for you to see how overlay hover effects is working
We need to explain few things in this setup.
How to enable hover overlay effect
For this, in container block, button, column blocks, you have overlay option
Click on Hover/Load effects icon. You will get new panel
So, how it works. Overlay is like additional layer above your block. You need to add background to this layer in first options. Then, if you use any hover options, layer will be hidden and will trigger animation when block has mouse hover.
In our example, we use Circle clip effect, but you can use any other and even combine them (like we did in one of block with scale and rotation).
Don’t forget to enable clip overflow option if you use overlay effects which overflow parent layout
You can see also text field where you can add parent class.
Explanation of parent hover class
So, what does it mean? Check our example, you can see that button also has hover effect, but it’s working not when you hover on button, but when you hover on whole block.
To make this, we added custom class “hovertransition” on our parent container block. You can do this in Advanced tab
Now, you can use the same class inside Parent class option. This will disable hover trigger over element and enable hover trigger over class. You can also add some delay as we did on buttons, so, hover effect will work with some delay with parent hover effect.