Gif doesn't want to move-CodePudding

my gif doesn't want to move, I've tried using left, right but nothing works, I need to put this picture in the middle of the two that are on top.

pic

 /* Img*/
figure {
  position: relative;
  top: 1200px;
  right: -200px;
  }
    
  figure:before,
  figure:after {
  content: '';
  left: 500px;
  position: absolute;
  }
    
  img {
  border-radius: 10px;
  margin: 0;
  padding: 0;
  }

  .image3 {
    border-radius: 20px;
    right: -500px;
  }

<figure>
    <img src="webbsite skins pic.jpg"  style="width:500px;height:300px;">
    <img src="patterns.png"  style="width:500px;height:300px;">
    <img src="pattern_gif.gif"  style="width:700px;height:300px;">
</figure>

CodePudding user response：

try instead of positioning: transform: translateX(your position)

CodePudding user response：

With Flexbox you can change the order of elements quite easily within the flex-container. The container (figure) has had the absolute positioning removed so that you do not need to scroll way down to see the results

figure {
  position: relative;
  display:flex;
  min-width:1700px;
  /*
  position: relative;
  top: 1200px;
  */
}

img {
  border-radius: 10px;
  margin: 0.1rem;
  
  width:500px;
  height:300px;
}

.image1{order:1}
.image2{order:3}

.image3 {
  border-radius: 20px;
  order:2;
  width:700px;
}

<figure>
  <img src="http://placekitten.com/300/200"  />
  <img src="https://pngquant.org/Ducati_side_shadow.png"  />
  <img src="https://media.giphy.com/media/6SZ5iwN70lJyOdLZZH/giphy.gif"  />
</figure>