Cursor Magic: Unique Hover Effect Made Simple
Learn how to effortlessly integrate eye-catching cursor designs into your Webflow site without custom code.
How It's Made
01.
Base Layer
Create a div named cursor-magic.
Style settings:
Width & Height as desired
Overflow: Hidden
Position: Relative
Background: Gradient color
02.
Pointer Layer
Add a div inside cursor-magic called pointer-wrap.
Style settings:
Display: Flex, align Center.
Position: Absolute, fill container.
Inside pointer-wrap, add a div called pointer-gradient.
Style settings:
Width: 50VH. Height: 50VH
Background: Circular gradient (same color, transparency from 100% at center to 0% at edges).
Set pointer-wrap Opacity to 0% (this will be changed later with hover interaction).
03.
Pattern Layer
Add a div inside cursor-magic called pattern.
Style settings:
Position: Absolute, fill container.
Background: Choose an image with seamless borders and transparent design.
Here are some designs to get inspired: LINK
.svg)
04.
Content Layer
Add a div inside cursor-magic called content.
Style settings:
Display: Flex, align Center.
Position: Absolute, fill container.
Place text and other elements inside this div.
I'm a Header
05.
The Hierarchy
Ensure the div structure follows this order:
cursor-magic
↳ pointer wrap
↳ pointer-gradient
↳ pattern
↳ content
I'm a Header
06.
The Magic Touch
Add a Mouse move over element interaction to cursor-magic.
Target the Pointer-wrap and add a move action as follows:
Mouse X actions: at 0%: -50%. at 100%: 50%
Mouse Y actions: at 0%: -50%. at 100%: 50%
Now create a new Hover animation to cursor-magic.
Hover in animation:
Target the pointer-wrap and set (Only children with this class):
Opacity: 0% Initial
Opacity 100%. Delay: 0. Duration: 0.3
Hover out animation:
Target the pointer-wrap and set (All elements with this class):
Opacity: 0% . Delay: 0. Duration: 0
.svg)
.svg)