Is there any way in CSS to make other objects move when another object is scaled?

Issue

I have a row of elements, and they have a hover animation to make them scale up. Is it possible to make other images next to them change position on scale to prevent the overlap?

body {
    background-color:#1a1a1a;
  }

img{
    max-width: 15%;
    transition-duration: 0.5s;
    transform-origin: center;
    border-radius: 25px;
    overflow: hidden;
    margin: 50px;
}

img:hover{
    cursor: pointer;
    transform: scale(110%);
}

<img src="https://www.tazzadesign.com/wp-content/uploads/sites/65/2013/11/dummy-image-square.jpg">
<img src="https://www.tazzadesign.com/wp-content/uploads/sites/65/2013/11/dummy-image-square.jpg">
<img src="https://www.tazzadesign.com/wp-content/uploads/sites/65/2013/11/dummy-image-square.jpg">

and example of the effect I am looking for would be something that looks like this:

Solution

This will scale images up and down, dependent on classes. I've amended your css slightly for display purposes and add the JS code (left comments as clear as possible).

// define function to return all siblings of hovered element
      function getAllSiblings(element, parent) {
        const children = [...parent.children];
        return children.filter((child) => child !== element);
      }

      // grab all img elements
      const imgs = document.querySelectorAll('img');

      imgs.forEach((i) => {
        // define siblings using function above
        const siblings = getAllSiblings(i, document.getElementById('parent'));

        // *hover in*
        i.addEventListener('mouseover', function () {
          // add an active class when hovered (amended your css)
          this.classList.add('active');

          // add small class to all sibling elements
          siblings.forEach((sibling) => {
            sibling.classList.add('small');
          });
        });

        // *hover out*
        i.addEventListener('mouseleave', function () {
          // remove active class and small classes so hovered element reverts to normal
          this.classList.remove('active');
          this.classList.contains('small') && this.classList.remove('small');

          // remove class small on all siblings so that everything is reverted to initial display
          siblings.forEach((sibling) => {
            sibling.classList.remove('small');
          });
        });
      });

body {
        background-color: #1a1a1a;
        /* added for display purposes */
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

      /* added for getting parent element */
      #parent {
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        width: 100%;
      }

      img {
        max-width: 15%;
        transition-duration: 0.5s;
        transform-origin: top;
        transform-origin: left;
        border-radius: 25px;
      }

      /* added for changing hover states */
      img.active {
        max-width: 17%;
        cursor: pointer;
        transform: scale(120%);
        transform-origin: center;
      }
      img.small {
        max-width: 17%;
        transform: scale(80%);
        transform-origin: center;
      }

<div id="parent">
      <img
        src="https://www.tazzadesign.com/wp-content/uploads/sites/65/2013/11/dummy-image-square.jpg"
      />
      <img
        src="https://www.tazzadesign.com/wp-content/uploads/sites/65/2013/11/dummy-image-square.jpg"
      />
      <img
        src="https://www.tazzadesign.com/wp-content/uploads/sites/65/2013/11/dummy-image-square.jpg"
      />
</div>

Answered By - Josh