Jump to content
Search Community

Getting div image to follow mouse cursor when hovering link

iamrufus test
Moderator Tag

Recommended Posts

Hi all

Im wondering if someone might be able to lend me a hand with a hover affect i am trying to achieve. What i want is when i hover over one of my venue links for the image to appear and move with the mouse cursor. I have a pen below and my current code that shows what i have so far. Its kinda working but not exactly how i would like. I want it to work similar to the below site (the commercial work section)

https://www.craig-reynolds.com/

 

Please excuse my perhaps poor use of gsap as i am still learning my way around it, i'm currently taking some courses to help me.

 

Id be so grateful for any help with this.

 

Thanks everyone

 

See the Pen oNLLmKd by iamrufus (@iamrufus) on CodePen

Link to comment
Share on other sites

Hey Rufus. The effect that you have in your pen is quite different than the one in the site that you link to. The one in the site that you linked to goes between a series of images over the same heading hover (a new one shown every so often, created going in the direction since the last image). The one in your pen just switches out one image for another when a different section is hovered. Which effect are you wanting? I assume the one from the site that you link to?

 

Unfortunately we don't really have the capacity to build out the effect for you. However we're happy to help with any particular issues that you can't figure out, especially ones that relate to GSAP :) Let us know if that's the case. Just think through the steps that need to happen (it's often good to write them out) then create the code necessary to do those steps.

Link to comment
Share on other sites

Hi Zach

thanks so much for your help. The section I was trying to get the same effect from on that site was the second section where it has a list of 9 projects and then on hover it displays an image that then follows the mouse cursor in the center.

 

on my pen my images on hover don’t appear to be centered around the mouse position, they appear to be off to the right and I can’t quite work out where I have gone wrong in my gsap code.

 

I hope that kinda makes sense....I’ve been going round in circles all day with it.

 

thanks again for your kind help

Link to comment
Share on other sites

1 minute ago, iamrufus said:

The section I was trying to get the same effect from on that site was the second section

Ah, sorry. I misunderstood.

 

2 minutes ago, iamrufus said:

on my pen my images on hover don’t appear to be centered around the mouse position, they appear to be off to the right and I can’t quite work out where I have gone wrong in my gasp code.

Your calculation is just off. In the MDN docs for clientX it says:

Quote

The clientX read-only property of the MouseEvent interface provides the horizontal coordinate within the application's viewport at which the event occurred (as opposed to the coordinate within the page).

But your images aren't currently positioned in regards to the viewport, they are positioned in regards to the whole page. Change their positioning to fixed will help. Besides that you probably want to change the offset so it's centered. And probably want to toggle the display of different images instead of switching out the URL for performance reasons (there could be a flash when switching images the way you have it right now).

Link to comment
Share on other sites

Thanks so much Zach,

 

I shall try setting the images as fixed, what offsets would need changing? Apologies my JavaScript skills are still pretty raw ☺️ 
 

your right regarding the flash when switching urls for the images, I’m thinking of changing that so there is an individual image in the image wrapper for each hover item that fades in to get rid of that

Link to comment
Share on other sites

  • 6 months later...

you will have better luck using THREE.JS for this, here is a video that shows you how to do this effect . no need to add the shaders if you just want the basic effect of moving the image on hover

 

  • Like 2
Link to comment
Share on other sites

  • 8 months later...
On 10/21/2020 at 8:09 PM, mikeage said:

Hey @iamrufus were you able to solve this? I'm looking to achieve this effect also but am having trouble centering the image on each link item.

I have the same situation in my project then I do a little more google about this and find similar posts related to this. No doubt THREE.JS is a good idea but I don't believe in copy-pasting this YouTube solution. It takes time to learn something new. 

Hi @mikeage You can find the solution form here. I hope it helps. - 

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...