Home Features Download v18.5 Child theme GGitHub

Cursor

HomeFeaturesCursor

Activating this feature transforms the cursor into a circle with a central dot, which can be easily customized using CSS. A specific class, .xx-cursor, acts as a trigger for further modifying the cursor's appearance. This customization is also handled via CSS. Here is an example:

HOVER ME
<div class="xx-cursor df jcc aic x-3 l-4 m-6 s-8 z-10 y-12 m0a">HOVER ME</div>

CSS TRIGGERS

.xx-cursor : Used for triggering, in order to know which elements to apply the cursor effect when we hover them.
.custom-cursor : Target this element to change the big circle that follows the mouse.
.custom-cursor::before : This is the small dot that also follows the mouse.
.custom-cursor.is-hovering : Target this class name to change the effect when mouse hovers over an element that has .xx-cursor.

🦁 Gridy