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 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:
CSS 
HTML .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)
Nie bardzo rozumiem twój problem. Jak do dokładniej opiszesz, to może coś pomogę.
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%;
}