JSFiddle - React, Tailwind, and code Playground

playing with background image, transparency and gradients

by CBroe

HTML

<div class="row">
  <div class="col">
    <h1>
  Foo Bar Baz
  </h1>
  </div>
  <div class="col">
    <div class="inner">
      <p>
        Lorem ipsum, dolor Sir Achmet. Lorem ipsum, dolor Sir Achmet. Lorem ipsum, dolor Sir Achmet.
      </p>
    </div>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: 1.5;
  text-shadow: 1px 1px 1px #fff;
}

.row {
  display: flex;
  min-height: 100vh;
}

.col {
  flex: 50%;
  position: relative;
  padding: 15vh 5vw;
}

.col:first-child {
  border-right: 1px solid #fff;
}

.col:last-child {
  padding: 12vh 0 15vh 0;
  border-left: 1px solid #fff;
  background: linear-gradient( 90deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 1) 85%, rgba(255, 255, 255, 1));
}

.row,
.inner:after {
  background: url(http://cdn2.spiegel.de/images/image-999629-galleryV9-cgrl-999629.jpg) 35% 35% fixed;
  background-size: cover;
}

.inner {
  position: relative;
  padding: 3vh 5vw;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  z-index: 1;
}

.inner:before,
.inner:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -2;
}

.inner:before {
  background: rgba(255, 255, 255, 0.375);
  z-index:-1;
}