how do I make elements not move when other elements do?

i have some image elements that when hovered on, scale up, however, this causes some other elements to move, which i dont want happening.

I have tried things like float: right which work, but dont fit for my website, since it’s margined and centered.

here is a simpled version of my site:

body {
    background-color:#1a1a1a;
  }

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

img:hover{
    max-width: 17%;
    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">

Answer

Use transform: scale(110%) without changing any sizes.

Advertisement

Answer