I am trying to build my own online portfolio website, since I learned some basic processing in art school. I want to have a single page website, with an image gallery that doesn't look like a grid, but like loose images across the page (not overlapping with the text or eachother). And I want them to look saturated or with a tint, unless you hover over them (or the name/title in the navigation). If you click on the image or it's title, I want to have the image grow in size without leaving the page, where the other image-boxes around it move aside (like billiards-balls but slower and set to a specific end place). As the image is clicked on I want to provide context by having some extra images (that aren't visible otherwise) available somehow, and some text underneath like the title and the concept.

I am really new to coding but I don't really know how to do this. I have a basic page with some text already but don't know how to then add these images on the page in a bit of loose, playful way. So I added some images to maybe clear the idea that I have, one with the page as it is now,

then one with the image gallery as I want it,

one with the image gallery as you hover on one image/title

(the red just being that the image loses the tint and gets it's original coloring back, and the title lightens up), and one when you clicked on that image/title.

(after clicking again I want it to get back to the way it was before you hovered)