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 🙂