How to Add a Hover Effect in Brizy

Updated: January 6, 2021

Hover effect is one of the features offered by Brizy. Thanks to the feature, you can add a hover effect to a certain element on the page you are working on. You can, for instance, add an effect where an image changes when the cursor is pointed to it. Or, you can add an effect where the background color changes when you hover your mouse over it. In Brizy itself, elements fall into three types: block, column, and element (the actual design elements to create your design). You can add a hover effect to those elements.

The way Brizy’s built-in hover effect feature works is pretty similar to Elementor’s. You can only add a very basic effect. It is the opposite of Divi Builder. In Divi Builder, you can effortlessly add an advanced hover effect as it uses CSS transform for its hover effect feature. You can actually add CSS transform too in Brizy, but you need to have CSS knowledge to do so. Here is how to add a hover effect in Brizy. We will also show you how to add CSS transform to add an advanced hover effect.

Adding a hover effect in Brizy

Adding a hover effect to a block

To add a hover effect to a block, you can click the mixer icon of the associated block to open the settings bar.

If you want to use a different background image on the hover state, you can click the Background tab on the settings bar. On the appearing panel, click the finger icon and select the image you want to use as the background on the hover state.

Once the image is selected, you can go to the Filters tab on the panel to apply the CSS filters to your image.

If the background contains an overlay and you want to remove it, you can click the Colors tab on the settings bar.

On the Overlay tab on the appearing panel, click the finger icon and set the overlay opacity to 0% (or any level to your liking).

If you want to use a different background color instead of an image on the hover state, you can simply set the opacity level to 100% (or any level to your liking) on the screenshot above and remove the background image.

To use a different border on the hover state, you can switch to the Border tab (under the Colors tab on the settings bar). Click the finger icon, select the border style, border color, and border size.

Adding a hover effect to a column

To add a hover effect to a column, first, hover your mouse over the column you want to add the hover effect to and click the arrow icon to open the settings bar.

Once the settings bar appears, you can click the Background tab. On the appearing panel, click the finger icon and select the image you want to use on the hover state. Switch to the Filters tab on the panel to add CSS filters to the image.

To use a solid color instead of image on the hover state, you can click the Colors tab on the settings bar. On the appearing panel, click the finger icon on the left side and select the color you like and make sure the color opacity is not set to 0% (you set to any value other than 0%).

To use a different border or add a box shadow on the hover state, you can simply switch to the Border tab and Shadow tab on the panel. Just don’t forget to click finger icon to switch to the hover state.

Adding a hover effect to an element

Unlike block and column, you can’t add an image background to an element. You can only use a solid color background. Meaning that you can only use a different color background (and border) on the hover state.

To start adding a hover effect to an element, click the element you want to add the hover effect to — to open the settings bar. On the appearing settings bar, click the Colors tab.

Depending on the element, the options you can set are varied. For instance, for the Icon element, you can set the icon, background, border, and box shadow. You can simply click the finger icon to set a different icon, background, border, and box shadow on the hover state.

Adding CSS transform

To add a more advanced hover effect, you can add CSS transform to an element. As said earlier, you can add CSS transform manually (via CSS code) since Brizy has no built-in option to do add CSS transform. Here are the examples of the CSS transform applied to Brizy columns.

You can add CSS transform whether to a block, column, or element. First off, open the settings bar of the element you want to add the CSS transform to (by clicking the mixer icon for block, arrow icon for column, and element itself for element). On the settings bar, click the gear icon followed by More Settings to open the settings panel.

On the settings panel, open the Advanced tab and paste the following CSS code to the Custom CSS field.

The code:

element:hover {
 transition: all .2s ease-in-out;
    transform: scale(1.1, 1.1);
    cursor: pointer;
    z-index: 1;
}

You can modify the code above in case you want to use a different transform style. The transform style itself is defined on the transform property. You can also use a different transform value. For more about CSS transform, you can refer to this page.

This page may contain affiliate links, which help support WP Pagebuilders.

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This

Share This

Share this post with your friends!