How to create a library/folder of images?

This is truly a stupid question, but I searched and searched and I cannot find a simple answer. The question is this: I'd like to upload a bunch of images not via the image block editor. I want to do some custom coding (which is ironic because I can't even figure out the most basic of things, like uploading images to a folder), which will have me pointing to various images.

Currently, the only way I can figure how to do this is to upload images to a page (just for the sake of getting them online), navigating to that page outside of the editor, and then right clicking and finding the image URL, which is some horrendously long URL made up of a billion random characters, and then copying that and going back to the editor.

FOR EXAMPLE. 

I am trying to create a simple thing where an image is displayed. You mouse over it, and the image "flips" to another image. You move the mouse and it moves back to the original image.

I searched the Forums for this and found another Squarespace user who has a simple code for this exact thing. Notice his very clean image filenames in this very simple code:

<img src="https://agiphoto.com/_team_portraits/jpegs/BW/Chris.jpg"

onmouseover="this.src='https://agiphoto.com/_team_portraits/gifs/Chris.gif'"

onmouseout="this.src='https://agiphoto.com/_team_portraits/jpegs/BW/Chris.jpg'">

Now, here's me trying the same thing but with my (placeholder) images:

<img src="https://images.squarespace-cdn.com/content/v1/5872b0ea46c3c4c349f4cd05/1584999684943-20H8L9NGGJJX295OB6O7/ke17ZwdGBToddI8pDm48kP1tQSNpMG7kWETQe-RWJBZZw-zPPgdn4jUwVcJE1ZvWhcwhEtWJXoshNdA9f1qD7Xj1nVWs2aaTtWBneO2WM-vR5pUyDysrzG5BR2keipYDf7mXfb9-btHQuiwbAleQMQ/EXPERTISETEST.jpg" 
onmouseover="this.src='https://images.squarespace-cdn.com/content/v1/5872b0ea46c3c4c349f4cd05/1584999712681-HD3QQJKYET5LCC0GIJHT/ke17ZwdGBToddI8pDm48kP1tQSNpMG7kWETQe-RWJBZZw-zPPgdn4jUwVcJE1ZvWhcwhEtWJXoshNdA9f1qD7Xj1nVWs2aaTtWBneO2WM-vR5pUyDysrzG5BR2keipYDf7mXfb9-btHQuiwbAleQMQ/EXPERTISETEST-FLIP.jpg'"
onmouseout=this.src"https://images.squarespace-cdn.com/content/v1/5872b0ea46c3c4c349f4cd05/1584999684943-20H8L9NGGJJX295OB6O7/ke17ZwdGBToddI8pDm48kP1tQSNpMG7kWETQe-RWJBZZw-zPPgdn4jUwVcJE1ZvWhcwhEtWJXoshNdA9f1qD7Xj1nVWs2aaTtWBneO2WM-vR5pUyDysrzG5BR2keipYDf7mXfb9-btHQuiwbAleQMQ/EXPERTISETEST.jpg'">

The process doesn't work and the image file thing is just a mess. So, there must be a way for me to simply create a folder called "flips" and then drop my images in there, right?

I suggest you do this with images that are uploaded as files on Squarespace not onto a page, then use the file URLs. The sample you are showing, the images are on a photo hosting site with simple urls. Might make it easier to put it together. 

You can upload images to your site with this guide. https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files

then the image has url: yoursite.com/s/image-name

eg: beaverhero.com/s/beach.png