adamk22 adamk22 - 3 months ago 22
Sass (Sass) Question

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;
}
}

Answer

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%;
    }
  }

}