Mouse-Over Photo Interaction/Cursor Replacement

Hi guys,

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:

  1. Having the div cursor as display:none, then changing it to display:relative as a mouse hover effect for the image

  2. 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: 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.

Screenshot 2020-06-19 at 16.07.45

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:

Screenshot 2020-06-19 at 16.40.09

Thanks a lot for any insight! Happy to take any other feedback at this point as well.


Here is my public share link: LINK

Hi Kate,

have you been able to solve your problem?

I’m currently trying to achieve a quite similar interaction.