https://www.peaceminusone.com/Exhibición

El sitio web anterior cuando cambia el tamaño tiene el efecto al acercar y alejar. En lugar del ajuste estándar, ¿cómo hago con el efecto con mi sitio? Intenté transición y transformación pero no hace nada. ¿Supongo que tiene algo que ver con JavaScript? .

Mi CSS:

 .gallery__img { width: 100%; height: auto; } .gallery__img2 { width: 100%; height: auto; } .container { width: 100%; display: flex; justify-content: center; transform: wrap 5s; } .pic { margin-top: 34.6px; } .pic p { margin-bottom: 35px; font-size: 12px; font-weight: 500; letter-spacing: 0.015rem; color: white !important; margin-top: 12px; margin-left: 20px; letter-spacing: 0.015em; } .pic img:hover { filter: grayscale(100%); cursor: pointer; } @media only screen and (max-width: 1899px) { .pic p { margin-top: 11px; margin-bottom: 35px; margin-left: 21px; font-size: 11.7px; } } @media only screen and (max-width: 1729px) { .pic p { margin-top: 13px; margin-bottom: 36px; margin-left: 21px; font-size: 11.7px; } } @media only screen and (max-width: 1280px) { .pic p { margin-bottom: 34px; } .nav { border-bottom-width: 1px; } } @media (max-width: 1000px) { .nav li { display: none; } .toggle-button { display: flex; } .container { flex-wrap: wrap; } }