GSAP Extensions How to Use Cursor Hover Effect in Bricks Builder Using BricksFly Estimated reading: 4 minutes 166 views Tired of flat, unresponsive pages? Cursor Hover Effects make your site feel alive by adding animations when users move their mouse over buttons, images, and other key areas. With each cursor move, your site responds in real time, creating a smoother, more interactive experience that feels modern and intuitive. To make your website more engaging and interactive, follow the steps below. Requirement Make sure you have installed: Bricks Theme BricksFly Pro Activate Cursor Hover Effect in BricksFly Go to your WordPress Dashboard. Click on BricksFly. Head to the Extension Tab. Under Effects, toggle on Cursor Hover effects. Step 1: Choose Your Target Element & Enable the Wrapper Select the element you want to apply the cursor effect to, then click on the container to enable the wrapper. Next, click on ‘Cursor Hover Effect’ and toggle the ‘Enable’ switch to ‘Yes’. Step 2: Add Your Text and Customize Typography Follow the process below to add your text and adjust the typography settings. Text In the Text box, you can enter any text that you want to appear when hovering over a specific element on the website. In this example, Cursor is used as the text. However, you can enter any text based on your design needs. Text Typography Note: In this example, the Text Typography settings are left unchanged. However, you can customize them based on your design needs. Color: Controls the text color that appears during the cursor hover effect. Font Size: Controls the size of the hover text, such as 16px or any other value based on your design needs. Text Align: Controls the alignment of the hover text, such as left, center, right, or justified. Text Transform: Controls the text case, such as uppercase, lowercase, capitalize, or default. Font Family: Controls the font family used for the hover text. Font Weight: Controls how bold or light the hover text appears. Font Style: Controls the style of the hover text, such as normal, italic, or oblique. Font Variation Setting: Allows you to apply advanced font variation values when supported by the selected font. Line Height: Controls the vertical spacing between lines of hover text. Letter Spacing: Controls the spacing between each letter in the hover text. White Space: Controls how spaces and line breaks are handled in the hover text. Text Wrap: Controls whether the hover text wraps to a new line or stays on a single line. Text Shadow: Adds a shadow effect behind the hover text to improve depth or visibility. Text Decoration: Controls text decoration styles, such as underline, overline, line-through, or none. Step 3: Configure Background, Size, and Border Use the Background, Width, Height, and Border settings to customize the appearance and size of the cursor hover effect. Background Background Color: Controls the background color that appears behind the cursor hover content. In this example, a dark gray color is selected. However, you can choose any color based on your design needs. Background Image: Allows you to add an image as the background for the cursor hover effect. In this example, Background Video: Allows you to add a video as the background for the cursor hover effect. Width Controls the width of the cursor hover area or background. In this example, the width value is set to 80. You can modify this value to adjust the size according to your layout. Height Controls the height of the cursor hover area or background. In this example, the height value is set to 80. You can modify this value to adjust the height according to your layout. Border Allows you to add and customize a border around the cursor hover area, including border type, width, color, and radius. Enable On Editor: It allows you to preview the Element animation directly inside the editor. Final Results
