Skalowanie po kliknięciu i przesuwanie pozostałych elementów

Witam,

pracuję nad prostą stroną dla mojej firmy.
Proszę o małą pomoc. Chciałbym uzyskać efekt zbliżania elementów po ich kliknięciu bez przesuwania pozostałych jak tutaj: https://codepen.io/ran0904/pen/bNpLvX
Próbowałem wprowadzić w mój kod to co działa w galerii powyżej, ale bez skutku: https://codepen.io/michalzr6/pen/ZEBjqRB

Mc_Hammer napisał(a):

Witam,

Proszę o małą pomoc. Chciałbym uzyskać efekt zbliżania elementów po ich kliknięciu bez przesuwania pozostałych jak tutaj: https://codepen.io/ran0904/pen/bNpLvX

Dlaczego zatem nie zrobisz jak w przykładzie, na który się powołujesz?

Właśnie próbuję, ale coś mi nie wychodzi. U mnie na localhoście skaluje mi mniej więcej z centrum kontenera #offer-sec i pozostałe elementy się przesuwają. Może to kwestia flexa ?

W przykładzie, który podajesz, pod :hover jest podpięty transform.
W twojej wersji pod :hover jest podpięty box-shadow.

Więc dostajesz to, co podpinasz.

Mc_Hammer napisał(a):

Pzecież w moim skalowanie jest po kliknięciu w boxa i nie to jest problemem a przesuwające się pozostałe elementy po wyskalowaniu jednego z nich.

Odpisuj w wątku, nie w komentarzach. Komentarze są do zupełnie pobocznych hm... komentarzy.

Dobra, teraz już widzę. Zatem wywal wszystko, co poprzedziłam x:

.offer-container input[type=checkbox]:checked~.offer {
    cursor: default;
    xwidth: 40%;
    xheight: auto;
    xposition: fixed;
    xtop: 20%;
    xleft: 25%;
    cursor: arrow;
    transform: scale(1.4, 1.4);
    transition: transform .4s ease-in;
    z-index: 10;
}

position: fixed; jest tu zupełnie bez sensu, bo wyjmuje ci obiekt z podstawowej treści strony, więc reszta elementów zapada się w to puste miejsce.

Wszelkie zmiany rozmiarów i położenia też są zupełnie bez sensu. Od tego właśnie jest transform. Transform działa tak, że przemieszcza i zniekształca element, ale reszta strony pozostaje przekonana, że on nada jest tam gdzie był i ma taki kształt i rozmiar, jak miał domyślnie, więc nic oprócz transformowanego elementu się nie przesuwa.

Obczaj sobie tutaj:
http://drakonica.pl/dokumenty/transform_2d_zestawienie.htm

Mam jeszcze pytanie: po kliknięciu w boxa pojawia mi się krótki opis pod obrazkiem. Dlatego wcześniej miałem width ustawiony żeby dobrze to wyglądało. Czy da się to wyskalować przez transform, jednocześnie zmienić szerokość, ale tak żeby pozostałe elementy się nie przesuwały ? (większe skalowanie po długości zniekształca tekst)

https://codepen.io/michalzr6/pen/ZEBjqRB

Nie bardzo rozumiem twój problem. Jak do dokładniej opiszesz, to może coś pomogę.

usunąłem width tak jak radziłaś, ale chciałbym go jakoś zachować żeby szerokość boxa była większa po kliknięciu
poprawiłem fidla

Nie mogę sforkować bez logowania.

Trochę to cudowane:

.offer-container input[type=checkbox]:checked~.offer {
	  background-color: rgba(199, 198, 198, 0.719);
    cursor: default;
    cursor: arrow;
		xwidth: 400px;    
    transform: scale(3, 1.5);
    transition: transform .4s ease-in;
    z-index: 10;
}

.offer-container input[type=checkbox]:checked~.offer > * {
  transform: scale(.5, 1);
}

.offer-container input[type=checkbox]:checked~.offer .offer-content {
    display: flex;
    opacity: 1;
    height: auto;
    transition: all 400ms ease-out;
    transform: scale(.5, 1);
}

.offer .section-header {
    text-align: center;
    padding: 10px 0;
    font-size: 1.2em;
    font-weight: 700;
}

.offer img {
    width: 150px;
    border-radius: 3%;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.offer-content {
    display: none;
    height: 0;
    opacity: 0;
    margin-top: 10px;
    width: 170%;
}