Search
Close this search box.

How to Add a Hover Effect in Brizy

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 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 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 our project. Read our affiliate disclosure.
Picture of Editorial Staff

Editorial Staff

WordPress page builder tutorials, tips, and resources
Want to turn your WordPress knowledge into revenue? OF COURSE!

Leave a Comment

Share This
Hey 👋🏻
Do you have a WP blog?
If so, you may need these. All the resources you need to grow your blog.

Your popup content goes here

50%

Where should we send the template?

After entering your email address, you will be added to our newsletter subscribers. You can unsubscribe anytime.

Want to Build Passive Income Like the One on the Screenshot Below?

Click the button on the right side to learn how 👉🏻
5 easy steps to turn your WordPress knowledge into monthly recurring revenue.

Click the above button to close the popup.