Move images with mouse on hover

[fionchadd]

Hi there, 

 

I'm trying to build a grid of items and have an image display when each item is hovered and follow the mouse. I have it almost working, but sometimes some of the images aren't appearing centered on the cursor and I'm not sure why. 

 

This doesn't seem to happen all the time or with all the images but here's a screen recording of that codepen showing it happening: https://drive.google.com/file/d/1SLffibOCOd7ISCWE5dziqm2gs32h39eI/view?usp=sharing

 

Do you have any idea why this is happening or how I can ensure the images are always centered on the cursor? 

 

Thanks! 

Hannah

See the Pen NWOGGKE by fionchadd (@fionchadd) on CodePen

[GreenSock]

Try doing this initially: 

gsap.set("ul img", {x: 0, y: 0, xPercent: -50, yPercent: -50})

You're setting your initial transforms directly in CSS only, but we always recommend setting transforms via GSAP so that it's consistent, performant, and unambiguous. My guess is that you started setting transforms via GSAP before the image(s) loaded, thus the translateX(-50%) translateY(-50%) was on an element that had no width or height, thus when GSAP did its parsing that's what got applied and then the inline transform overruled the CSS selector style. 

[fionchadd]

Ah amazing, thank-you! I hoped I'd be missing something obvious