3

I'm flexing 2 elements, they overlap about 25%. Using mix-blend-mode, it blends the backgrounds nicely, but also the text.

JS fiddle right here: https://jsfiddle.net/simohell/q9breg60/

I tried using ::before to apply the mix-blend mode but i can't figure it out.

.wrapper {
  display: flex;
}

.text {
  margin-top: 30px;
  flex: 0 0 50%;
  padding: 30px;
  background-color: rgba(17, 38, 59, .95);
  mix-blend-mode: multiply;
}

h1,
p {
  color: #fff;
}

.image {
  flex: 0 0 75%;
  margin-left: -25%;
  background: url("https://images.unsplash.com/photo-1456298964505-ef9e1a638209?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2534&q=80");
  background-size: cover;
  mix-blend-mode: multiply;
}
<div class="wrapper">
  <div class="text">
    <h1>Welcome to this snippet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolore quaerat cupiditate accusantium eligendi vitae quas omnis obcaecati unde deserunt. Quibusdam aspernatur magni accusamus debitis distinctio iusto aliquam natus magnam?</p>
  </div>
  <div class="image">&nbsp;</div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
simohell
  • 31
  • 1

1 Answers1

1

Move the background of the text to main wrapper instead then increase its z-index to allow the image to blend only with the background. The main trick is to adjust the size of the gradient to simulate the same background for the text only:

.wrapper {
  display: flex;
  background:
    linear-gradient(rgba(17, 38, 59, .95),rgba(17, 38, 59, .95)) 
    bottom left/ 
    50% /*widh:50% */
    calc(100% - 30px) /*height:100% - top margin */
    no-repeat;
}

.text {
  margin-top: 30px;
  flex: 0 0 50%;
  padding: 30px;
  z-index:2;
}

h1,p {
  color: #fff;
}

.image {
  flex: 0 0 75%;
  margin-left: -25%;
  background: url("https://images.unsplash.com/photo-1456298964505-ef9e1a638209?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2534&q=80");
  background-size: cover;
  mix-blend-mode: multiply;
}

body {
 margin:0;
}

* {
  box-sizing:border-box;
}
<div class="wrapper">
  <div class="text">
    <h1>Welcome to this snippet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolore quaerat cupiditate accusantium eligendi vitae quas omnis obcaecati unde deserunt. Quibusdam aspernatur magni accusamus debitis distinctio iusto aliquam natus magnam?</p>
  </div>
  <div class="image">&nbsp;</div>
</div>

You can also move the image to the background of the main wrapper and consider background-blend-mode. You will also have a reduced code:

.wrapper {
  overflow:auto;
  background:
  url("https://images.unsplash.com/photo-1456298964505-ef9e1a638209?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2534&q=80") 
    center/cover content-box,  
  linear-gradient(rgba(17, 38, 59, .95),rgba(17, 38, 59, .95)) 
    bottom left/ 
    50% /*widh:50% */
    calc(100% - 30px) /*height:100% - top margin */
    no-repeat;
  padding-left:25%;
  background-blend-mode: multiply;
}
.text {
  margin-top: 30px;
  width:66.6%; /* we added 25% of padding so we need 66.6% from 75% to get 50%*/
  margin-left:-33.4%; /* we shift back by the added margin 25% (33.4% of 75%)*/
  padding: 30px;
}
h1,p {
  color: #fff;
}

body {
 margin:0;
}

* {
  box-sizing:border-box;
}
<div class="wrapper">
  <div class="text">
    <h1>Welcome to this snippet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolore quaerat cupiditate accusantium eligendi vitae quas omnis obcaecati unde deserunt. Quibusdam aspernatur magni accusamus debitis distinctio iusto aliquam natus magnam?</p>
  </div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415