I need some help smoothing out a mouse-over interaction. The idea is that as you move your cursor over the image, a plus bubble appears in place of the cursor and acts as a cursor until you move off of the image.
It’s working—to a degree. What I would love is for the cursor to fade in and drift smoothly from every side, rather than yanking from the center. I’ve tried a few different options:
Having the div cursor as display:none, then changing it to display:relative as a mouse hover effect for the image
Having the div cursor change opacity from 0-100% linked to the mouse movement—however, this is very jerky and also only works in a single direction, eg. left-to-right and top-to-bottom, not bilaterally.
Does anyone have any suggestions for how to properly create this effect?
It’s on the “people” page of the site, here’s the public link: https://melanie-lacki.webflow.io/people
Here’s how I have it set up:
- The entire image gallery section is in a div called Side Gallery that moves left on scroll.
- The image and plus cursor are both in a div called Plus Cursor Zone.
- The plus cursor is a div called Plus Cursor.
- The image is called Scroller Image and currently has an expand cursor style applied to it for ease of editing, but will have no cursor when I get this figured out.
Scroller Image has a mouse hover effect to show Plus Cursor, and a mouse move effect to trail the cursor around called Plus Cursor Follow, that also applies a 45° transform to the cursor. It also has a mouse click effect—ignore that, that’s all good, ha.
You can see the interactions here:
Thanks a lot for any insight! Happy to take any other feedback at this point as well.
Here is my public share link: LINK