Image appear on hover and follow cursor

I have created a resume on my website. I would like to implement the effect of an image appearing to the left of the text (see example https://www.nynnelucca.com/resume) when the cursor is within the 'field'. I would also like the image to move according to the cursor but without moving outside of a defined area. Is this possible?

I created this example, is what you want?

https://tuanphan3.squarespace.com/hover-text-show-image-example?noredirect

pass: abc

Thank you for your response, tuanphan. 

Yes, or I guess, kind of like this: https://www.alexandrapelletier.com/index as I would like the image also to move a bit after appearing. 

I am aware that the example comes from the portfolio page. This is however not possible for me to use because I also want a paragraph with every headline. 

In my example, I used Text Block (Left) and Image Block (Right)

So you can use heading, paragraph, any what you want.

With moving, I don't know how to achieve this

With your example site, the site uses Portfolio Page. We can use CSS code to add paragraph under each portfolio title, if you want, just share link to portfolio + let me know which text you want to add.

Okay, I think the best solution is then to use your example. 

Do I achieve this with code or...?

Thanks in advance. 

Thank you, @tuanphan! It works 🙂 

Can you only do this with a business account? I have personal and want to do the same. If not, any work arounds? 

I have a personal plan but want to add some custom code to make my site more interactive. I particularly want this effect: https://sagmeister.com/

Hover over image and title appears and follows cursor in the image space.
 

I understand Javascript is likely required, but hoping someone might be able to share a workaround for a personal plan. This is for my portfolio site, I will not be upgrading. Is there anything I can do with code blocks or embed blocks? OR just HTML & CSS?

I have not set up my portfolio yet so don't have a site to share but the example is exactly how I would do it.
 

On 7/29/2024 at 5:35 AM, minishinny said:

Can you only do this with a business account? I have personal and want to do the same. If not, any work arounds? 

You can add #4 code via Markdown Block if you use Personal Plan