I have a line of images and when I hover over an image, I want it to enlarge and overlap the other images.
The way I did it, when I move the mouse over it, the row is all disfigured:

[![enter image description here](https://i.stack.imgur.com/QmNBz.png)](https://i.stack.imgur.com/QmNBz.png)

[![enter image description here](https://i.stack.imgur.com/4H0v9.png)](https://i.stack.imgur.com/4H0v9.png)

code:

```
<div>
    <p>Fotos do anúncio</p>
    {row.images.map((image, key) => (
        <img className="imagesTable" src={image.url} />
    ))}
</div>

```

style:

```
.imagesTable {
  width: 50px !important;
  height: 50px !important;
  margin-right: 10px !important;
  margin-top: 5px !important;

   &:hover {
      width: 200px !important;
      height: 200px !important;
      object-fit: cover;
   }
}

```
['https://Stackoverflow.com/questions/63401726', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/8365573/']
As someone else has commented, the way to do this would be to use `transform:scale(2)` on `&:hover` - adjusting the number as necessary. This should avoid any layout shift, and it will be more performant than animating the width as you are currently doing.

See this article: <https://pqina.nl/blog/animating-width-and-height-without-the-squish-effect/>
I did it like this and it worked:

[![enter image description here](https://i.stack.imgur.com/q57W4.png)](https://i.stack.imgur.com/q57W4.png)

[![enter image description here](https://i.stack.imgur.com/8Q24s.png)](https://i.stack.imgur.com/8Q24s.png)

code:

```
<div>
    <p>Fotos do anúncio</p>
    <div className="images">
        {row.images.map((image, key) => (
            <div className="image-container">
                <img src={image.url} alt="Imagem anúncio" />
            </div>
        ))}
    </div>
</div>

```

style:

```
.images {
    display: flex;
    overflow: hidden;
    transition: all 1.2s ease;
    margin-top: -15px;
  }

  .image-container {
    position: relative;
    display: flex;

    img {
      width: 50px;
      height: 50px;
      -moz-transition: all 0.3s;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
    }
  }

  .image-container:not(:nth-child(1)) {
    position: relative;
    margin-left: -15px;
  }

  .image-container:hover {
    z-index: 1000;

    img {
      width: 170px;
      height: 200px;
      cursor: pointer;
    }
  }

```