GSAP Extensions Cursor Hover Effect Extensions Estimated reading: 9 minutes 32 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 Elementor (Page Builder) Animations Addons for Elementor (Our Plugin) Tip: Make sure Animation Addons is installed and activated on your WordPress site before you start. How To Activate Cursor Hover Effect Go to your WordPress Dashboard. Click on Animation Addons. 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’. The Cursor Hover Effect is now enabled. You’ll find the option available in the page builder. Enable & Enable On Editor Here, you’ll first notice the ‘Enable’ setting. Without enabling the ‘Enable‘ button, you won’t be able to preview your element’s animation directly in the “Enable On Editor”. If you set it to “Yes”, the animation will play in the editor just like it does on the live page. However, if you keep it “Off”, the element will remain static in the editor. This does not disable or remove the animation from the live site. In short, this option gives you a quick idea of how your elements will animate on the front end. 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. For example, I wrote “Cursor,” but you can write anything you like. Typography Familly: It offers a wide variety of font families to enhance the visual style of your text, such as serif, sans-serif, monospace, display, and many more. You can choose any of them based on your design preferences. Size: You can set the font size of your text to 16px or any other value, depending on your preference. However, I haven’t applied a specific size to my text yet. For example, if you set the font size to 16px, the text will appear at that size on the site when hovered over. Weight: You can set the font weight of your text to define how bold or light it appears. For example, you can choose values like 400 for normal or 700 for bold, depending on the font. However, I haven’t applied a specific weight to my text yet. For instance, if you set the font weight to 700, the text will appear bold on the site when hovered over. Transform: In the Transform settings, you’ll see options like Default, Uppercase, Lowercase, Capitalize, and Normal. If you select Default, the text will appear as it is. Choosing Uppercase will convert all your text to capital letters, while selecting Lowercase will turn all your text into small letters. Next, if you select Capitalize, the first letter of each word will appear in uppercase. Once you select one, the text will appear that way when you hover over it on the live site. Style: The Style settings include Default, Normal, Italic, and Oblique. I chose ‘Normal’ as an example, but feel free to try the others and pick the one that suits your design best. Decoration: In the Decoration settings, you’ll find options like Default, Underline, Overline, Line Through, and None. If you choose Default, your text will appear without any effect when hovered. However, if you select Underline, a line will appear beneath your text. If you choose Overline, the line will appear above the text. Selecting Line Through will place a line across the middle of the text. Finally, if you pick None, the text will appear normally on hover without any decoration. But I will keep it as the Default. Line height: You can set the line height to any pixel value based on your design style, but it’s a good idea to follow the ideal range to keep your text looking smooth and subtle on hover. If you set it between 24px and 28px, the text will appear to breathe slightly or expand vertically, creating a smooth and gentle animation. However, I will keep it as the default. Letter spacing: You can set the letter spacing to any value depending on your design style, but it’s a good idea to stay within a reasonable range to keep the text clean and readable when hovered. For example, increasing it slightly to around 0.5px or 1px can make the text feel more open and clear. However, I prefer to keep it at the default. Word spacing: You can set the word spacing to any value depending on your design style, but it’s a good idea to keep it within a reasonable range to maintain a clean and natural flow when the text is hovered. For example, increasing it slightly to around 2px or 4px can make the text feel more balanced and easier to read. However, I prefer to keep it at the default. Step 3: Style Your Hover with Color & Borders Now that the animation is ready, it’s time to focus on the visual details. Adjusting text color, background, and borders will help your design stand out and feel more refined. Let’s go over the key styling options. Text Color Pick the color that suits your style! For this example, I’ve picked maroon. Since I selected the maroon color for the hover effect, my text will appear in maroon when hovered over. Background Type Color location: If you set the color location to 50%, the first color will cover half of the background, and the second color will start blending in from the middle. However, if you set it to 100%, the first color will fill the entire background, leaving no space for the second color to show. In my case, I’ll just leave it at the default setting. Second color location: The ‘Second Color Location’ determines how far the second color will spread across the background. If you set it to 100%, it will extend all the way to the end. However, if you lower the value, the second color will blend in earlier, affecting how the gradient transitions between the two colors. For example, I set it to 100%, but you can set it based on your choice. Type Angle: The Type Angle allows you to control the direction of the gradient transition between colors. For example, if you set it to 0°, the gradient will flow from top to bottom. Setting it to 90° makes the gradient flow from left to right. If you choose 180°, the gradient will go from bottom to top, and so on. For example, I set it to 180°, but you can choose the angle based on your preference. Width If you increase the width to 100%, the hover effect may stretch across the entire width of the element. A smaller width, like 20%, will make the effect appear narrower. For example, I’ve set it to 100%. Height If you set the height to 100%, the hover effect will cover the full height of the element. A lower height, such as 20%, will make the effect appear shorter and more compact. For instance, I’ve set it to 100%. Border Type Default: If you apply it to the default, no border will be applied. None: If you apply a solid, single, and solid line border. Solid: Selecting the ‘Solid’ border type applies a sleek, continuous line around your element when hovered, making it stand out and inviting user interaction. Additionally, you can customize the border width to adjust the thickness of the border and the border radius to control the roundness of the corners, allowing you to tailor the hover effect to match your design preferences. Double: Choosing ‘Double’ adds two parallel lines with a space between them around your element on hover, creating a bold and stylish outline that enhances visual appeal and encourages user interaction. You can further customize this effect by adjusting the border width to control the thickness of the lines and modifying the border radius to round the corners, tailoring the appearance to fit your design preferences. Dotted: Selecting the Dotted border type adds a series of small, evenly spaced dots around your element when hovered, giving it a subtle, textured outline that adds a playful and lightweight visual touch. You can further customize this effect by adjusting the border width to control the size of the dots and modifying the border radius to round the corners, tailoring the appearance to fit your design preferences. Dashed: Selecting the Dashed border type adds a series of short, evenly spaced lines around your element when hovered, creating a modern and dynamic outline that enhances visual interest and interactivity. You can further customize this effect by adjusting the border width to control the thickness of the dashed lines and modifying the border radius to round the corners, tailoring the appearance to fit your design preferences. Grove: Selecting the ‘Groove’ border type applies a 3D, inset groove effect around your element when hovered, giving it a carved, textured appearance that enhances depth and interactivity. You can further customize this effect by adjusting the border width to control the thickness of the groove and modifying the border radius to round the corners, tailoring the appearance to fit your design preferences. Final Results You Did It Your website now has an amazing hover effect! When people move their mouse over the element you chose, it smoothly responds with a cool, eye-catching movement. This interactive feature adds a fresh and engaging touch to your site, making it more dynamic and fun for visitors to explore. It’s a simple yet powerful way to enhance your website’s user experience and keep people engaged. However, if you have any questions or need a hand, feel free to reach out to our support team—we’re always here to help.
