CODEWITHSUNDEEP
htmlcsssass
adamk22
adamk22

Reputation: 611

Aligning two diagonal images

So I got the following design for a hero layout that I'm working on:

enter image description here

I got as far as making the two images as shown on the image with the description next to the image and aligning the images. I also looked into clip-path but unfortunately it doesn't support IE. So I used the transform rotate option to rotate the divs with -15 degrees and rotate the images inside the div back with 15 degrees. However, the problem I have is that when scaling with the browser, a gap shows up between the two images which have to stay aligned. (Tablet and mobile has another state, but that's another story).

I created a codepen: http://codepen.io/adamk22/pen/zBLBAL which has the layout including the css. How do I keep the two images aligned when the browser scales? What did I not take into account?

HTML: 

<nav> Test Nav </nav>
<div class="container">
  <div class="hero-container-top">
    <div class="hero-img-box-container">
    <div class="hero-img-box-left">
      <div class="hero-img-box">
        <img class="hero-img" src="http://gyproc.dev/themes/custom/drywall/images/hero_img1.jpeg">
      </div>
    </div>
    </div>
    <div class="hero-text-box">
      <div class="hero-text-box-cta">
        <h1>Hello World</h1>
        <h3>Phasellus tempus. Quisque ut nisi. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Morbi mollis tellus ac sapien.</h3>
      </div>
    </div>
  </div>
  <div class="hero-container-bottom">
    <div class="hero-text-box">
      <div class="hero-text-box-cta">
        <h2> Hello world</h2>
        <h3>Phasellus tempus. Quisque ut nisi. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Morbi mollis tellus ac sapien.</h3>
      </div>
    </div>
    <div class="hero-img-box-container">
    <div class="hero-img-box-right">
      <div class="hero-img-box">
        <img class="hero-img" src="http://gyproc.dev/themes/custom/drywall/images/hero_img2.jpeg">
      </div>
    </div>
    </div>
  </div>
</div>

CSS:

body {
  background: white;
  font-family: 'Helvetica', sans-serif;
  display: flex;
  flex-direction: row;
}

h1 {
  font-size: 36px;
  line-height: 46px;
  font-weight: 100;
}

h2 {
  font-size: 24px;
  font-weight: 100;
}

h3 {
  font-size: 16px;
  line-height: 30px;
  font-weight: 100;
}

nav {
  flex: 0 0 235px;
  background: #0569C8;
  display: inline-block;
}

.container {
  flex: 1 0 auto;
  margin: 36px;
  overflow: hidden;
  background: white;
}

.hero-img-box-container {
  width: 60%;
}

.hero-container-top {
  display: flex;
  flex-direction: row;
  height: 767px;
  background: white;

  .hero-text-box {
    width: 40%;
    position: relative;
  }

  .hero-text-box-cta {
    position: absolute;
    top: 40%;
    left: 40%;
    transform: translateX(-50%) translateY(-50%);
  }
}

.hero-container-bottom {
  display: flex;
  flex-direction: row;
  position: relative;
  top: -256px;
  height: 751px;

  .hero-text-box {
    width: 40%;
    position: relative;
  }

  .hero-text-box-cta {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
}

.hero-img-box-left {
  background: lightgrey;
  display: inline-block;
  height: 1023px;
  width: 100%;
  transform: rotate(15deg);
  transform-origin: top;
  position: relative;
  top: -165px;
  overflow: hidden;

  .hero-img-box {
    transform: rotate(-15deg);
    display: inline-block;
  }

  .hero-img {
    height: 765px;
    width: auto;
    position: relative;
    top: 140px;
    left: 10px;
  }
}

.hero-img-box-right {
  background: lightgrey;
  display: inline-block;
  height: 1000px;
  width: 100%;
  transform: rotate(15deg);
  transform-origin: top;
  position: relative;
  overflow: hidden;
  right: -21.8%;
  top: 0;

  .hero-img-box {
    transform: rotate(-15deg);
    display: inline-block;
  }

  .hero-img {
    height: 628px;
    width: auto;
    position: relative;
    top: 80px;
    left: -130px;
  }
}

Upvotes: 3

Views: 1025

Answers (1)

adamk22
adamk22

Reputation: 611

I've provided a workable solution: http://codepen.io/adamk22/pen/dXqGbo/

CSS:

body {
  background: white;
  font-family: 'Helvetica', sans-serif;
  display: flex;
  flex-direction: row;
  width: 100%;
}

h1 {
  font-size: 36px;
  line-height: 46px;
  font-weight: 100;
}

h2 {
  font-size: 24px;
  font-weight: 100;
}

h3 {
  font-size: 16px;
  line-height: 30px;
  font-weight: 100;
}

nav {
  flex: 0 0 235px;
  background: #0569C8;
  display: inline-block;
}

.container {
  flex: 1 0 auto;
  margin: 36px;
  overflow: hidden;
  background: white;
}
.hero-container {
  background: white;
}

.hero-container__top {
  position: relative;
  height: auto;

  .hero-img {
    width: 100%;
  }

  .hero-text-box {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .hero-text-box-cta {
    padding: 50px;
  }
}

.hero-container__bottom {
  position: relative;
  height: auto;

  .hero-img {
    width: 100%;
  }

  .hero-text-box {
    width: 100%;
  }

  .hero-text-box-cta {
    padding: 0 50px;
  }

  .hero-img-box-container {
  }
}

.hero-img {
  height: auto;
  position: relative;
}

.hero-img-box-container {
  width: 100%;
  position: relative;
  height: auto;
}

.hero-img-box {
  position: relative;
  height: 100%;
  width: 100%;
}

.hero-img-box__left {
  background: white;
  z-index: 10;
}

.hero-img-box__right {
  background: white;
}

@media screen and (min-width: 1230px) {

  .hero-container {
    flex: 1 0 auto;
    overflow: hidden;
    background: white;
  }

  .hero-container__top {
    overflow: hidden;
    position: relative;
    height: 0;
    padding-bottom: 120%;
    margin-top: -85px;

    .hero-img {
      width: 175%;
    }

    .hero-text-box {
      width: 40%;
      height: 100%;
      position: relative;
      margin-left: 60%;
    }

    .hero-text-box-cta {
      margin-top: 90%;
      transform: translateY(-50%);
      padding: 50px;
    }
  }

  .hero-container__bottom {
    position: relative;
    overflow: hidden;
    height: 0;
    padding-bottom: 50%;
    margin-top: -60%;

    .hero-img {
      width: 120%;
    }

    .hero-text-box {
      width: 40%;
      height: 100%;
    }

    .hero-text-box-cta {
      position: absolute;
      z-index: 20;
      top: 40%;
      width: 45%;
      padding: 0 50px;
    }

    .hero-img-box-container {
      left: 50%;
    }
  }

  .hero-img {
    left: 50%;
    height: auto;
    position: absolute;
    transform: rotate(-6deg) translateX(-50%);
  }

  .hero-img-box-container {
    width: 60%;
    position: absolute;
    top: 0;
    height: 100%;
  }

  .hero-img-box {
    position: absolute;
    display: inline-block;
    height: 2000px;
    width: 100%;
    overflow: hidden;
    top: 0;
    transform: rotate(6deg);
  }

  .hero-img-box__left {
    background: white;
    transform-origin: top;
    z-index: 10;
  }

  .hero-img-box__right {
    background: white;
    transform-origin: top;
  }

}

@media screen and (min-width: 1400px) {

  .hero-container__bottom {
    .hero-text-box-cta {
      top: 50%;
    }
  }

}

Upvotes: 1

Related Questions