I have a set of images on my site, 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?

CSS:

body {
    background-color:#1a1a1a;
  }

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

img:hover{
    max-width: 17%;
    cursor: pointer;
    transform: scale(150%);
     transform-origin: top;
    transform-origin: left;
}

View The CodePen

CodePudding user response：

Check this out (after hover, the shape is changing width & height):

const divs = document.querySelectorAll('div');

const reset = () => {
    divs.forEach(div => div.classList.remove('active'))
}

divs.forEach(div => div.addEventListener('mouseover', () => {
    reset();
    div.classList.toggle('active');
}));

divs.forEach(div => div.addEventListener('mouseout', () => {
    reset();
}))

section {
  height: 150px;
  width: 600px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 2px solid red;
}

div {
  flex: 1;
  height: 100px;
  border: 2px solid black;  
  transition: flex .2s, transform .2s;
  margin: 1em;
}

div.active {
  transform: scaleY(1.5);
  flex: 2;
}

<section>
  <div></div>
  <div></div>
  <div></div>  
  <div></div>  
</section>

CodePudding user response：

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>