stretch animation on click when change product view

Video with animation

How can I achieve a similar effect using css and js? I came up with the idea that each main box should have 3 images in it (image of the item preceding, current and next). I've even created such a layout, but I have absolutely no idea how to get such an animation when clicking on the buttons that change the product. My layout

EDIT: I added the html code of what I created. I have the individual product switches programmed in JS for now, so I won't post it here.

<div class="gallery">
  <div class="post_gallery" data-per_page="4">
    <div class="gallery_item">
      <div class="gallery_image">
        <a href="/product1" title="Product 1">
          <img src="../img/slide-4.png" width="400" height="284" />
          <img src="../img/Slide-1.png" width="400" height="284" />
          <img src="../img/slide-2.png" width="400" height="284" />
        </a>
      </div>
    </div>
    <div class="gallery_item">
      <div class="gallery_image">
        <a href="/product2" title="Product 2">
          <img src="../img/Slide-1.png" width="400" height="284" />
          <img src="../img/Slide-2.png" width="400" height="284" />
          <img src="../img/Slide-3.png" width="400" height="284" />
        </a>
      </div>
    </div>
    <div class="gallery_item">
      <div class="gallery_image">
        <a href="/product3" title="Product 3">
          <img src="../img/Slide-2.png" width="400" height="284" />
          <img src="../img/Slide-3.png" width="400" height="284" />
          <img src="../img/Slide-4.png" width="400" height="284" />
        </a>
      </div>
    </div>
    <div class="gallery_item">
      <div class="gallery_image">
        <a href="/product4" title="Product 4">
          <img src="../img/Slide-3.png" width="400" height="284" />
          <img src="../img/Slide-4.png" width="400" height="284" />
          <img src="../img/Slide-1.png" width="400" height="284" />
        </a>
      </div>
    </div>
  </div>
  <div class="controllers">
    <button type="button" class="active"></button>
    <button type="button"></button>
    <button type="button"></button>
    <button type="button"></button>
    <button type="button"></button>
  </div>
</div>

Via Active questions tagged javascript - Stack Overflow https://ift.tt/jCpNVUh