CSS coding for zoom and center when hovering on page using image URLs

Hello Squarespace community.  I have been working to rebuild a website and have used other platforms before that off GUI options instead of having to deal with CSS coding, so this is completely new to me.  I know where to copy and paste the images that I need to get the URLs.  

When the mouse hovers over a product, I would like to have that image blow up in size and be centered on the page.  There's also the possibility that I would have more than one angle of the same product, so I would also want that image to have a slightly transparent arrow if another image is available.

I apologize in advance for my ignorance, but I greatly appreciate the expertise that is offered on here.  Looking forward to hearing from some of you.