HTML/CSS three images positioning

1

Hi there!

Can you please help me to understand how to style such a markup?

I have something like this but it’s so ugly, cannot find out the mistake

<div class="main__imgs">
    <div class="main__img--left">
      <img src="../assets/images/image2.png">
    </div>
    <div class="main__img--center">
      <img src="../assets/images/image1.png">
    </div>
    <div class="main__img--right">
      <img src="../assets/images/image3.png">
    </div>
  </div>

and SCSS according to figma (ugly, too)

.main {
  &__imgs {
    border: 1px solid red;
  }

  &__img {
    &--left {
      img {
        width: 238px;
        height: 331px;
        left: 229.19px;
        top: 201.76px;
        transform: rotate(1.1deg);
      }
    }
    &--center {
      width: 476px;
      height: 702px;

      img {
        object-fit: cover;
        left: 491.27px;
        top: 73.89px;
        transform: rotate(1.5deg);
      }
    }

    &--right {
      img {
        width: 345px;
        height: 238px;
        left: 890.32px;
        top: 494.97px;
        transform: rotate(2.03deg);
      }
    }
  }
}

I would be grateful for any advice! Thank you!

2

I assume you are just talking about the images?

You don’t have any position set. I would try moving the positioning to the container divs, make them position absolute, and then give the main container position relative.

It will make the main container collapse completely so that is something you will have to account for. Also, as the CSS is now it is a completely static layout with zero responsiveness.

https://jsfiddle.net/w2kb3x8a/

3

Thank you soooo much!