Estoy tratando de construir mi propio sitio web de cartera en línea, ya que aprendí algunos procesamientos básicos en la escuela de arte. Quiero tener un sitio web de una sola página, con una galería de imágenes que no parezca una cuadrícula, sino imágenes sueltas en la página (que no se superpongan con el texto ni entre sí). Y quiero que se vean saturados o con un tinte, a menos que pase el mouse sobre ellos (o el nombre/título en la navegación). Si hace clic en la imagen o en su título, quiero que la imagen crezca en tamaño sin salir de la página, donde los otros cuadros de imagen a su alrededor se mueven a un lado (como bolas de billar pero más lento y colocado en un lugar final específico). A medida que se hace clic en la imagen, quiero brindar contexto al tener algunas imágenes adicionales (que de otro modo no son visibles) disponibles de alguna manera, y algo de texto debajo, como el título y el concepto.

Soy realmente nuevo en la codificación, pero realmente no sé cómo hacer esto. Ya tengo una página básica con algo de texto, pero no sé cómo agregar estas imágenes en la página de una manera un poco suelta y divertida. Así que agregué algunas imágenes para quizás aclarar la idea que tengo, una con la página tal como está ahora,

luego una con la galeria de imagenes como la quiero,

uno con la galería de imágenes mientras se desplaza sobre una imagen/título

(el rojo solo es que la imagen pierde el tinte y recupera su color original, y el título se aclara), y uno cuando hizo clic en esa imagen/título.

(después de hacer clic de nuevo, quiero que vuelva a ser como era antes de que pasaras el cursor)