Understanding overlay hover effects and custom hover class

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).

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.