Środkowanie zdjęcia w albumie

Cześć mam kilka pytań.
Jak można wyśrodkować zdjęcia po clicku w moim albumie(Bez użycia position, to rozwala album)?
Jak zablokować hover i click jeżeli jedno ze zdjęć jest już kliknięte?
Jak dodać animacje powrotu?

Link:
https://codesandbox.io/s/recursing-glitter-zf0tf

1. możesz dać dla contanera position relative, a dla imageClicked position absolute, i dodać odpowiednio np. left: 0; z-index: 10
2. musisz użyć js.
   https://www.quora.com/How-to-unhover-an-element-with-an-active-hover-with-JS
   https://stackoverflow.com/questions/40086408/revert-animation-on-exit
3. trzeba po odcisnieciu usunac klase imageClicked.

phanc napisał(a):

1. możesz dać dla contanera position relative, a dla imageClicked position absolute, i dodać odpowiednio np. left: 0; z-index: 10
2. musisz użyć js.
   https://www.quora.com/How-to-unhover-an-element-with-an-active-hover-with-JS
   https://stackoverflow.com/questions/40086408/revert-animation-on-exit
3. trzeba po odcisnieciu usunac klase imageClicked.

(3)Samo usunięcie klasy imageClicked powoduje po prostu powrót zdjęcia tam a ja chciałbym żeby wtedy uruchomiła się animacja.
(1)Niestety ale użycie position absolute rozwala mi album :(

Co rozumiesz przez: rozwala album?
W ogólności, jeśli chcesz otrzymywać konkretne odpowiedzi, musisz zadawać konkretne pytania w stylu:
robi się taki a taki efekt, a chciałbym, żeby się robił efekt siaki a owaki.

Freja Draco napisał(a):

Co rozumiesz przez: rozwala album?
W ogólności, jeśli chcesz otrzymywać konkretne odpowiedzi, musisz zadawać konkretne pytania w stylu:
robi się taki a taki efekt, a chciałbym, żeby się robił efekt siaki a owaki.

Zdjęcie wyżej przesuwa mi to zdjęcie a ja chciałbym środkować je z zachowaniem struktury

Zrób sobie np. taką klasę:

.obrazek_wybrany {
  display:block;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  max-width:100%;
  max-height:100%;
}

I dodawaj do wybranego zdjęcia.
Element nadrzędny, względem którego chcesz to centrować, musi mieć:

position:relative.