CODEWITHSUNDEEP
htmlcsssass
Othman El houfi
Othman El houfi

Reputation: 53

How to keep two images well responsively overlapping one another?

I have two images, I want to overlap them but put a slight offset between them, as well as reducing image size when the screen is smaller.

I succeeded to make it for one media query, but the others are not fully stable when the screen size changes !

So How can I put the two images on top of each other with a small offset and resize them when the screen size changes ?

You can see a version of my work in the image, as well as the code I wrote for when the minimum screen size is 1300px.

Here you can see the two images

<div className="signatureContainer">
    <span className="imageContainer">
          <img className="image1" src="path1"  />
          <img className="image2" src="path2"  />
    </span>
</div>

// Predefined Break-points
$breakPoint-1: 1300px;
$breakPoint-2: 720px;
$breakPoint-3: 420px;

.signatureContainer {

  position: relative;

  .imageContainer{
  }

  img {
    box-shadow: 0 6px 20px 0 rgba(21, 24, 23, 0.44);
  }

  span:nth-child(1)  {
    position: absolute;
    // top: 35%;
    // left: 17%;
  }

  span:nth-child(2)  {
    position: relative;
    top: -100px;
    left: 15%;
  }
}


@media only screen and (min-width: $breakPoint-1) {

  .signatureContainer {


    img {
      box-shadow: 0 6px 20px 0 rgba(21, 24, 23, 0.44);
    }

    span:nth-child(1)  {
      position: absolute;
      // top: 35%;
      // left: 17%;
    }

    span:nth-child(2)  {
      position: relative;
      top: -100px;
      left: 15%;
    }
  }
}


@media only screen and (max-width: $breakPoint-1) {

  .signatureContainer {

    padding: 5em 0;
    margin-top: 3em;


    img {
      box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.36);
    }

    span:nth-child(1)  {
      position: absolute;
      top: 150px;
      left: 120px;
      // transform: translate( -60% , 10% );
      // transform: translate( -50px, 50px );
    }

    span:nth-child(2)  {
      position: relative;
      top: 5%;
      left: 5%;
      // transform: translate( 50px, -50px );
    }
  }
}

Upvotes: 1

Views: 2170

Answers (1)

Alberto Rhuertas
Alberto Rhuertas

Reputation: 773

Here is a possible solution. You only have to adjust the width of the responsive container considering the aspect-ratio of the image due to avoid stretch issues. Notice that 50px is the slight offset between the images (same on X and Y axis in this case). So you can put it on one(or two) css/scss var(s) and play with the values.

.container {
  position: relative;
  width: 380px;
  height: 180px;
}
.container img {
  position: absolute;
  width: calc(100% - 50px);
  height: calc(100% - 50px);
  object-fit: cover;
  box-shadow: 0 6px 20px 0 rgba(21, 24, 23, 0.44);
}
.container img.image1 {
  bottom: 0;
  left: 0;
}
.container img.image2 {
  right: 0;
  top: 0;
}
@media (min-width: 720px) {
  .container {
    width: 480px;
    height: 280px;
  }
}
@media (min-width: 1300px) {
  .container {
    width: 580px;
    height: 380px;
  }
}
<div class="container">
  <img class="image1" src="https://picsum.photos/500/300" />
  <img class="image2" src="https://picsum.photos/500/300" />
</div>

Upvotes: 1

Related Questions