title: image gallery without a set grid, fading out of tint, changing places of unclicked items and title/description/extra img visible after click
body: <p>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.</p>
  <p>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,</p>
  <p><a href="https://i.stack.imgur.com/dtd0E.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dtd0E.jpg" alt="enter image description here" /></a></p>
  <p>then one with the image gallery as I want it,</p>
  <p><a href="https://i.stack.imgur.com/o2VV4.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o2VV4.jpg" alt="enter image description here" /></a></p>
  <p>one with the image gallery as you hover on one image/title
  <a href="https://i.stack.imgur.com/nl4oE.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nl4oE.jpg" alt="enter image description here" /></a></p>
  <p>(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.
  <a href="https://i.stack.imgur.com/9y0GF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9y0GF.jpg" alt="enter image description here" /></a></p>
  <p>(after clicking again I want it to get back to the way it was before you hovered)</p>